<template>
  <div class="img-canvas-list" :style="(imgCount > 2 ? 'overflow-y:scroll;' : '') + 'height:' + height + 'vh;'">
    <div
      v-if="checkrole(['admin', 'checker', 'marker'])"
      class="left-panel-tools"
      style="position: absolute; left: 20; top: 20; z-index: 2000"
    >
      <el-tooltip effect="light" content="查看，快捷键（q）" placement="bottom">
        <el-button circle size="mini" icon="el-icon-search" @click="paperToolChange('select')" style="margin-left: 0" />
      </el-tooltip>
      <el-tooltip effect="light" content="画线，快捷键（l）" placement="bottom">
        <el-button
          v-show="labelTools['line']"
          circle
          size="mini"
          icon="el-icon-minus"
          @click="paperToolChange('line')"
          style="margin-left: 0"
        />
      </el-tooltip>
      <el-tooltip effect="light" content="画多边形，快捷键（p）" placement="bottom">
        <el-button
          v-show="labelTools['poly']"
          circle
          size="mini"
          icon="fa fa-lemon-o"
          @click="paperToolChange('poly')"
          style="margin-left: 0"
        />
      </el-tooltip>
      <el-tooltip effect="light" content="矩形框，快捷键（r）" placement="bottom">
        <el-button
          v-show="labelTools['rect']"
          circle
          size="mini"
          icon="el-icon-crop"
          @click="paperToolChange('rect')"
          style="margin-left: 0"
        />
      </el-tooltip>
      <el-tooltip effect="light" content="矩形框带点，快捷键（s）" placement="bottom">
        <el-button
          v-show="labelTools['rectPoint1']"
          circle
          size="mini"
          icon="el-icon-news"
          @click="paperToolChange('rectPoint1')"
          style="margin-left: 0"
        />
      </el-tooltip>
      <el-tooltip effect="light" content="画点，快捷键（o）" placement="bottom">
        <el-button
          v-show="labelTools['point1']"
          circle
          size="mini"
          icon="fa fa-circle"
          @click="paperToolChange('point1')"
          style="margin-left: 0"
        />
      </el-tooltip>
      <el-tooltip effect="light" content="网格" placement="bottom">
        <el-button
          v-show="labelTools['grid']"
          circle
          size="mini"
          icon="el-icon-menu"
          @click="paperToolChange('grid')"
          style="margin-left: 0"
        />
      </el-tooltip>
      <el-tooltip v-if="checkrole(['admin', 'checker', 'marker'])" effect="light" content="伪3D" placement="bottom">
        <el-button
          v-show="labelTools['cube']"
          circle
          size="mini"
          icon="fa fa-cube"
          @click="paperToolChange('cube')"
          style="margin-left: 0"
        />
      </el-tooltip>
      <el-tooltip effect="light" content="保存，快捷键（ctrl + s）" placement="bottom">
        <el-button circle size="mini" icon="fa fa-floppy-o" @click="markSubmit()" style="margin-left: 0" />
      </el-tooltip>
    </div>
    <el-card :body-style="{ padding: '0px' }" v-if="imgCount > 0">
      <div
        :id="id + 'canvasContainer1'"
        :style="{ position: 'relative', height: markType == 10 || imgCount == 10 ? '82vh' : '41vh' }"
      >
        <canvas resize :id="id + 'canvasId1'" />
        <img :id="id + 'sourceImage1'" style="display: none" :src="labelImg1" />
      </div>
    </el-card>
    <!--el-card :body-style="{padding: '2px'}" v-if="imgCount>1">
      <div align="center">
        ({{imgIndex}} / {{imgCount}})
        <el-button @click="loadDrawing(fileList[currentIndex].mQaResultId, imgIndex - 1)" :disabled="imgIndex <= 1" :body-style="{align: 'center'}" size="mini" icon="el-icon-arrow-left" circle/>
        <el-button @click="loadDrawing(fileList[currentIndex].mQaResultId, imgIndex + 1)" :disabled="imgIndex >= imgCount" :body-style="{align: 'center'}" size="mini" icon="el-icon-arrow-right" circle/>
      </div>
    </el-card-->
    <el-card :body-style="{ padding: '0px' }" v-if="imgCount >= 2">
      <div :id="id + 'canvasContainer2'" style="position: relative; height: 41vh">
        <canvas resize :id="id + 'canvasId2'" />
        <img :id="id + 'sourceImage2'" style="display: none" :src="labelImg2" />
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" v-if="imgCount >= 3">
      <div :id="id + 'canvasContainer3'" style="position: relative; height: 41vh">
        <canvas resize :id="id + 'canvasId3'" />
        <img :id="id + 'sourceImage3'" style="display: none" :src="labelImg3" />
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" v-if="imgCount >= 4">
      <div :id="id + 'canvasContainer4'" style="position: relative; height: 41vh">
        <canvas resize :id="id + 'canvasId4'" />
        <img :id="id + 'sourceImage4'" style="display: none" :src="labelImg4" />
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" v-if="imgCount >= 5">
      <div :id="id + 'canvasContainer5'" style="position: relative; height: 41vh">
        <canvas resize :id="id + 'canvasId5'" />
        <img :id="id + 'sourceImage5'" style="display: none" :src="labelImg5" />
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" v-if="imgCount >= 6">
      <div :id="id + 'canvasContainer6'" style="position: relative; height: 41vh">
        <canvas resize :id="id + 'canvasId6'" />
        <img :id="id + 'sourceImage6'" style="display: none" :src="labelImg6" />
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" v-if="imgCount >= 7">
      <div :id="id + 'canvasContainer7'" style="position: relative; height: 41vh">
        <canvas resize :id="id + 'canvasId7'" />
        <img :id="id + 'sourceImage7'" style="display: none" :src="labelImg7" />
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" v-if="imgCount >= 8">
      <div :id="id + 'canvasContainer8'" style="position: relative; height: 41vh">
        <canvas resize :id="id + 'canvasId8'" />
        <img :id="id + 'sourceImage8'" style="display: none" :src="labelImg8" />
      </div>
    </el-card>
  </div>
</template>

<script>
import Paper from 'paper'
import $ from 'jquery'
import { getImageWithCache } from '@/api/mark/onlineCheckV1'
import { checkRole } from '@/utils/permission'
import { listRemarkBall, delRemarkBall, updateRemarkBall } from '@/api/mark/remarkBall'
import tools from './tools/index'

export default {
  name: 'PictureList',
  props: {
    id: { type: String, default: 'x-' },
    height: Number,
    taskId: [String, Number],
    HideTip: Function,
    ShowTip: Function,
    attributeNames: {},
    colorNames: {},
    sync_highlight_objects: Function,
    sync_clear_highlight_objects: Function,
    setPosition: Function,
    elementsRemark: {},
    handleElementComments: Function,
    changeCubeInfo: Function,
    changeList: Object,
    addPicMarkAnnotation: Function,
    submitAnnotations: Function,
  },
  computed: {
    markAnnotations() {
      return this.$store.state.markData.markAnnotations
    },
    remarkList() {
      return this.$store.state.markData.remarkList
    },
  },
  data() {
    return {
      pointStrokeWidth: 2,
      lineStrokeWidth: 2,
      polyStrokeWidth: 2,
      rectStrokeWidth: 2,
      attributesTextOpacity: 1,
      mQaResultId: [String, Number],
      pointTextFontSize: 48,
      detailsDialogOpen: false,
      isFullscreen: false,
      paperToolPosition: new Array(),
      selectedObject: {
        mMarkAnnotationId: null,
        name: '',
        a1: '',
        a2: '',
        a3: '',
        a4: '',
        a5: '',
        a6: '',
        a7: '',
        a8: '',
        b1: '',
        b2: '',
        b3: '',
        b4: '',
        b5: '',
        b6: '',
        b7: '',
        b8: '',
        remark: '',
        attributes: [],
        type: '2d',
        imageIndex: '',
        errorType: '',
        mPoint: {
          x: -1,
          y: -1,
          z: -1,
        },
        elementInstance: null,
        position: null,
      },
      // imgIndex: -1,
      imgCount: 0,
      markType: 0,
      toolTopbody: '',
      labelImg1: '',
      labelImg2: '',
      labelImg3: '',
      labelImg4: '',
      labelImg5: '',
      labelImg6: '',
      labelImg7: '',
      labelImg8: '',
      canvasIndex: -1,
      raster: new Array(), // 图片对象
      rasterLayer: new Array(), // 图片图层
      mainLayer: new Array(), // 矩形图层
      projects: new Array(),
      remarkMap: new Map(), // 批注图标
      viewWidth: 0,
      viewHeight: 0,
      imageWidth: 0,
      imageHeight: 0,
      viewZoom: null,
      factor: 1.25,
      maxZoom: 10,
      currentIndex: -1,
      remark: null,
      remarkBallList: null,
      paperTool: null,
      annotation2d: new Array(),
      annotation2dMap: new Array(),
      selectedDragRect: null,
      selectedPath: null,
      moveHitOptions: {
        match: (hitResult) => {
          if (hitResult && hitResult.type === 'pixel') return false
          if (
            hitResult &&
            hitResult.item &&
            (hitResult.item.textObject ||
              hitResult.item.markType === 'point' ||
              hitResult.item.markType === 'rectPoint1')
          ) {
            return true
          }
          return false
        },
        segments: true,
        stroke: true,
        bounds: true,
        center: true,
        tolerance: 4,
      },
      clickHitOptions: {
        // match: hitResult => {
        //   if (hitResult && hitResult.type === 'pixel') return false
        //   if (hitResult && hitResult.item && hitResult.item.textObject) {
        //     return true
        //   }
        //   return false
        // },
        // segments: true,
        // stroke: true,
        // bounds: true,
        // center: true,
        // tolerance: 4,
        match: (hitResult) => {
          if (hitResult && hitResult.item && hitResult.item.markType === 'poly') {
            return true
          }
          return false
        },
        stroke: true,
        tolerance: 3,
      },
      highLightParams: null,
      labelTools: {
        line: false,
        rect: false,
        poly: false,
        rectPoint1: false,
        point1: false,
      },
    }
  },
  methods: {
    checkrole(role) {
      return checkRole(role)
    },
    // 获取a1对象的属性值
    getSelectedObjectAttributes(a1, imageIndex) {
      let items = this.mainLayer[imageIndex].getItems()
      for (let i = 0; i < items.length; i++) {
        if (items[i].tag) {
          let _array = items[i].tag.split(';')
          if (a1 == _array[1]) {
            const attributes = []
            let _d = _array[0].split(':')[1]
            for (let i = 1; i <= 9; i++) {
              if (_array[i] && _array[i] != null && _array[i] != '' && _array[i] != 'null') {
                try {
                  let jsonObject = JSON.parse(this.selectDictLabel(this.attributeNames, 'a' + i + '_' + _d + 'd'))
                  let _values = jsonObject.values[_array[i]]
                  if (_values == null || _values == undefined || _values == '') _values = _array[i]
                  let key = jsonObject.typeDesc
                  let value = _values
                  let _data = {
                    key,
                    value,
                  }
                  attributes.push(_data)
                } catch {}
              }
            }
            return attributes
          }
        }
      }
      return []
    },
    // 初始化2D视图图片定位、大小、缩放等初始化数据
    initPaperToolPosition(imgCount, markType) {
      this.imgCount = imgCount
      this.markType = markType
      if (this.markType === 10) this.pointTextFontSize = 24
      if (this.imgCount) {
        for (let i = 0; i <= this.imgCount; i++) {
          let paperToolProperties = {
            rasterLayerPositionX: 0,
            rasterLayerPositionY: 0,
            mainLayerPositionX: 0,
            mainLayerPositionY: 0,
            zoom: undefined,
            center: undefined,
            fontSize: this.pointTextFontSize,
          }
          this.paperToolPosition[i] = paperToolProperties
        }
      }
    },
    paperToolChange(toolName) {
      this.HideTip()
      if (this.paperTool && this.paperTool.onToggleOut) {
        this.paperTool.onToggleOut()
      }
      if (toolName === 'select' || !this.labelTools[toolName]) {
        this.paperTool = global.CustomPaperTool
      } else {
        this.paperTool = tools[toolName]
        if (toolName === 'grid') {
          const gridConfig = this.selectDictLabel(this.attributeNames, 'gridConfig')
          if (gridConfig) {
            try {
              gridConfig = JSON.parse(gridConfig)
              this.paperTool.rowCount = gridConfig.rowCount
              this.paperTool.columnCount = gridConfig.columnCount
            } catch {
              this.paperTool.rowCount = 2
              this.paperTool.columnCount = 0
            }
          } else {
            this.paperTool.rowCount = 2
            this.paperTool.columnCount = 0
          }
        } else if (toolName === 'poly') {
          this.paperTool.isLine = false
        } else if (toolName === 'line') {
          this.paperTool.isLine = true
        }
      }
      this.paperTool.activate()
      // this.paperTool.changeList = this.changeList;
      this.paperTool.newMarkEvent = (event, callback) => {
        this.addPicMarkAnnotation(event, (params) => {
          if (params.ret === 'confirm') {
            this.changeList.add(event.id, {
              action: 'addNew',
              info: event,
            })
          }
          callback(params)
        })
      }
    },
    // 初始化图片组件事件监听
    initPaperTool() {
      if (this.paperTool === null) {
        this.paperTool = global.CustomPaperTool
        this.paperTool.onMouseDown = (event) => {
          this.paperToolOnMouseDown(event)
        }
        this.paperTool.onMouseMove = (event) => {
          try {
            this.paperToolOnMouseMove(event)
          } catch {}
        }
        this.paperTool.onMouseDrag = (event) => {
          this.paperToolOnMouseDrag(event)
        }
        this.paperTool.onMouseUp = (event) => {
          this.paperToolOnMouseup(event)
        }
        this.paperTool.onKeyDown = (event) => {
          this.paperToolOnKeyDown(event)
        }
      }
    },
    paperToolOnMouseDown(event) {
      // 鼠标右键点击不做处理
      if (event.event.buttons == 2) {
        return
      }

      if (event.modifiers.alt) {
        let hitResult = Paper.project.hitTest(event.point, this.clickOptions)
        let polyInstance = undefined
        if (hitResult.type == 'stroke' && hitResult.item.markType === 'poly') {
          // 插点
          polyInstance = hitResult.item
          polyInstance.insert(hitResult.location.index + 1, event.point)
        } else if (event.item && event.item.pointIndex >= 1000) {
          // 删点
          polyInstance = event.item.parentLabel
          event.item.remove()
          polyInstance.segments[event.item.pointIndex - 1000].remove()
        }
        if (polyInstance) {
          polyInstance.points.forEach((point) => {
            point.remove()
          })
          // if (polyInstance.fillPath) {
          //   polyInstance.fillPath.remove()
          // }
          polyInstance.points = new Array()
          let p = 0
          // let fillPath = new Paper.Path()
          polyInstance.segments.forEach((element) => {
            let markPoint = new Paper.Path()
            markPoint.add(new Paper.Point(element.point.x, element.point.y))
            // fillPath.add(new Paper.Point(element.point.x, element.point.y))
            markPoint.strokeColor = polyInstance.strokeColor
            markPoint.strokeWidth = polyInstance.strokeWidth
            markPoint.strokeCap = 'round'
            markPoint.strokeScaling = false
            markPoint.closed = true
            markPoint.opacity = 1
            markPoint.markType = 'point'
            markPoint.pointIndex = 1000 + p
            markPoint.parentLabel = polyInstance
            polyInstance.points.push(markPoint)
            p++
          })
          // fillPath.strokeColor = polyInstance.fillColor
          // fillPath.strokeWidth = 0.01
          // fillPath.strokeScaling = false
          // fillPath.closed = true
          // fillPath.opacity = 0.4
          // fillPath.fill = true
          // fillPath.fillColor = polyInstance.fillColor
          // polyInstance.fillPath = fillPath
          // fillPath.markType = 'fillPath'
          // fillPath.basePath = polyInstance
          this.changeList.add(polyInstance.mMarkAnnotationId, {
            type: 'path',
            action: 'update',
            info: polyInstance,
          })
        }
        return
      }

      event.item.project.activeLayer.children.forEach((child) => {
        child.selected = false
      })

      // let hitResults = Paper.project.hitTestAll(event.point, this.clickHitOptions)
      // for (let hitResult of hitResults) {
      //   if (hitResult && hitResult.item.markType === 'poly' && hitResult.item.closed) {
      //     event.item.project.activeLayer.children.forEach(child => {
      //       if (child.markType === 'poly') {
      //         if (child.basePath) child.opacity = 0.01
      //       }
      //     })
      //     hitResult.item.selected = true
      //     const _index = event.item.project.activeLayer.imageIndex
      //     this.resetSelectedObject(_index)
      //     const _array = hitResult.item.tag.split(';')
      //     if (hitResult.item.markType === 'poly') {
      //       if (hitResult.item.basePath) {
      //         hitResult.item.opacity = 0.4
      //       }
      //     }
      //     event.item = hitResult.item

      //     // if (hitResult.item.point1) {
      //     //   hitResult.item.point1.opacity = 1
      //     //   hitResult.item.point3.opacity = 1
      //     // }
      //     // let _d = _array[0].split(':')[1]
      //     // for (let i = 1; i <= 9; i++) {
      //     //   if (_array[i] && _array[i] != null && _array[i] != '' && _array[i] != 'null') {
      //     //     try {
      //     //       let jsonObject = JSON.parse(this.selectDictLabel(this.attributeNames, 'a' + i + '_' + _d + 'd'))
      //     //       let _values = jsonObject.values[_array[i]]
      //     //       if (_values == null || _values == undefined || _values == '') _values = _array[i]
      //     //       let key = jsonObject.typeDesc
      //     //       let value = _values
      //     //       let _data = {
      //     //         key,
      //     //         value,
      //     //       }
      //     //       this.selectedObject.attributes.push(_data)
      //     //     } catch {}
      //     //   }
      //     // }
      //     // this.selectedObject.mMarkAnnotationId = hitResult.item.mMarkAnnotationId
      //     // this.selectedObject.name = _array[0].split(':')[0]
      //     // this.selectedObject.a1 = _array[1]
      //     // this.selectedObject.a2 = _array[2]
      //     // this.selectedObject.a3 = _array[3]
      //     // this.selectedObject.a4 = _array[4]
      //     // this.selectedObject.a5 = _array[5]
      //     // this.selectedObject.a6 = _array[6]
      //     // this.selectedObject.a7 = _array[7]
      //     // this.selectedObject.a8 = _array[8]
      //     // this.selectedObject.b1 = _array[9]
      //     // this.selectedObject.b2 = _array[10]
      //     // this.selectedObject.b3 = _array[11]
      //     // this.selectedObject.b4 = _array[12]
      //     // this.selectedObject.b5 = _array[13]
      //     // this.selectedObject.b6 = _array[14]
      //     // this.selectedObject.b7 = _array[15]
      //     // this.selectedObject.b8 = _array[16]
      //     // this.selectedObject.type = '2d'
      //     // this.selectedObject.remark = this.elementsRemark['ball-' + _array[1] + '-2d-' + _index]
      //     //   ? this.elementsRemark['ball-' + _array[1] + '-2d-' + _index].remark
      //     //   : ''
      //     // this.selectedObject.errorType = this.elementsRemark['ball-' + _array[1] + '-2d-' + _index]
      //     //   ? this.elementsRemark['ball-' + _array[1] + '-2d-' + _index].errorType
      //     //   : ''
      //     // this.selectedObject.mPoint.x = hitResult.item.customCenter.x
      //     // this.selectedObject.mPoint.y = hitResult.item.customCenter.y
      //     // // this.selectedObject.elementInstance = hitResult.item.missObject;
      //     // this.selectedObject.markType = hitResult.item.markType
      //     // this.sync_clear_highlight_objects(this.selectedObject)
      //     // return
      //   }
      // }

      if (event.item) {
        event.item.project.activeLayer.children.forEach((child) => {
          if (child.markType === 'poly') {
            if (child.basePath) child.opacity = 0.01
          }
        })

        if (event.item.markRemarkId) {
          if (event.modifiers.control) {
            this.$confirm('确定删除该条批注？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              if (event.item.textObject) event.item.textObject.remove()
              event.item.remove()
              this.remarkMap.delete(event.item.missId)
              delRemarkBall(event.item.markRemarkId).then((response) => {
                if (response.code === 200) {
                  this.msgSuccess('批注删除成功')
                } else {
                  this.msgError(response.msg)
                }
              })
            })
          } else {
            this.selectedPath = event.item
          }
          return
        }

        let _index = event.item.project.activeLayer.imageIndex

        if (event.modifiers.control) {
          // let louPath = new Paper.Path();
          // louPath.add(event.point);
          // louPath.strokeColor = 'red';
          // louPath.strokeWidth = 18;
          // louPath.strokeCap = 'round';
          // louPath.strokeScaling = false;
          // louPath.closed = true;
          // louPath.opacity = 1;
          // louPath.missPoint = true;
          // let remarkText = new Paper.PointText({
          //   position: event.point,
          //   fillColor: 'white',
          //   justification: 'center',
          //   fontSize: this.paperToolPosition[_index].fontSize,
          //   locked: true
          // });
          // remarkText.strokeWidth = 1;
          // remarkText.content = "验";
          // remarkText.opacity = 1;
          // louPath.textObject = remarkText;
          let missId = '2d-' + _index
          if (event.item.tag && event.item.markType) {
            let _array = event.item.tag.split(';')
            missId += '-' + _array[1]
          }
          // louPath.missId = missId;
          // this.remarkMap.set(missId, louPath);
          let ppp = this.rasterLayer[_index].globalToLocal(event.point)
          this.selectedObject.imageIndex = _index
          this.selectedObject.type = '2d'
          this.selectedObject.a1 = missId
          this.selectedObject.errorType = 'type_error'
          this.selectedObject.mPoint = {
            x: ppp.x,
            y: ppp.y,
          }
          // this.selectedObject.elementInstance = louPath;
          this.selectedObject.callback = (res) => {
            if (res === 'success') {
              // this.reRender();
            }
          }
          this.handleElementComments(missId, this.selectedObject)
          const storeKey = 'TaskId:' + this.taskId + ';mQaResultId:' + this.mQaResultId
          this.remarkList.delete(storeKey)
          return
        }

        if (event.modifiers.shift) {
          if (event.item.markType === 'point' && (event.item.pointIndex == 0 || event.item.pointIndex == 1)) {
            this.selectedDragRect = event.item.parentLabel
            let point = event.point
            this.selectedDragRect.data.state = 'resizing'
            this.selectedDragRect.data.previousPoint = point
            // 计算离哪个角的点近就朝哪个方向变化
            let bounds = this.selectedDragRect.bounds
            let dis1 = point.getDistance(bounds.topLeft)
            this.selectedDragRect.data.type = 1 // 左上角
            let temp = dis1
            let dis2 = point.getDistance(bounds.topRight)
            if (dis2 < temp) {
              this.selectedDragRect.data.type = 2 //　右上角
              temp = dis2
            }
            let dis3 = point.getDistance(bounds.bottomRight)
            if (dis3 < temp) {
              this.selectedDragRect.data.type = 3 // 右下角
              temp = dis3
            }
            let dis4 = point.getDistance(bounds.bottomLeft)
            if (dis4 < temp) {
              this.selectedDragRect.data.type = 4 // 左下角
            }
          } else if (event.item.markType === 'rect' && event.item.rectPoint1) {
            this.selectedPath = event.item
          } else if (event.item.markType === 'point1') {
            this.selectedPath = event.item
          }
        } else {
          this.selectedPath = null
        }

        this.resetSelectedObject(_index)

        //TODO这里调同步更新2d3d
        this.sync_clear_highlight_objects(this.selectedObject)
        if (event.item.typeTag || event.item.markType) {
          if (event.item.markType === 'fillPath') {
            event.item = event.item.basePath
          }
          // event.item.selected = true
          if (event.item.points) {
            for (let pIndex = 0; pIndex < event.item.points.length; pIndex++) {
              event.item.project.activeLayer.addChild(event.item.points[pIndex])
            }
          }
          if (event.item.rectPoint1) {
            event.item.project.activeLayer.addChild(event.item.rectPoint1)
          }
          if (event.item.point1) {
            event.item.project.activeLayer.addChild(event.item.point1)
            event.item.project.activeLayer.addChild(event.item.point3)
          }
          if (event.item.midPath) {
            event.item.project.activeLayer.addChild(event.item.midPath.pointMid)
          }
          if (event.item.rangePath) {
            event.item.project.activeLayer.addChild(event.item.rangePath.rangePoint1)
            event.item.project.activeLayer.addChild(event.item.rangePath.rangePoint2)
          }
          this.selectedPath = event.item
        }

        if (event.item.tag) {
          let _array = event.item.tag.split(';')
          // if (event.item.markType === 'poly') {
          //   if (event.item.basePath) {
          //     event.item.opacity = 0.4
          //   }
          // }
          // event.item.selected = true
          if (event.item.point1) {
            event.item.point1.opacity = 1
            event.item.point3.opacity = 1
          }
          let _d = _array[0].split(':')[1]
          for (let i = 1; i <= 9; i++) {
            if (_array[i] && _array[i] != null && _array[i] != '' && _array[i] != 'null') {
              try {
                let jsonObject = JSON.parse(this.selectDictLabel(this.attributeNames, 'a' + i + '_' + _d + 'd'))
                let _values = jsonObject.values[_array[i]]
                if (_values == null || _values == undefined || _values == '') _values = _array[i]
                let key = jsonObject.typeDesc
                let value = _values
                let _data = {
                  key,
                  value,
                }
                this.selectedObject.attributes.push(_data)
              } catch {}
            }
          }
          this.selectedObject.mMarkAnnotationId = event.item.mMarkAnnotationId
          this.selectedObject.name = _array[0].split(':')[0]
          this.selectedObject.a1 = _array[1]
          this.selectedObject.a2 = _array[2]
          this.selectedObject.a3 = _array[3]
          this.selectedObject.a4 = _array[4]
          this.selectedObject.a5 = _array[5]
          this.selectedObject.a6 = _array[6]
          this.selectedObject.a7 = _array[7]
          this.selectedObject.a8 = _array[8]
          this.selectedObject.b1 = _array[9]
          this.selectedObject.b2 = _array[10]
          this.selectedObject.b3 = _array[11]
          this.selectedObject.b4 = _array[12]
          this.selectedObject.b5 = _array[13]
          this.selectedObject.b6 = _array[14]
          this.selectedObject.b7 = _array[15]
          this.selectedObject.b8 = _array[16]
          this.selectedObject.type = '2d'
          this.selectedObject.remark = this.elementsRemark['ball-' + _array[1] + '-2d-' + _index]
            ? this.elementsRemark['ball-' + _array[1] + '-2d-' + _index].remark
            : ''
          this.selectedObject.errorType = this.elementsRemark['ball-' + _array[1] + '-2d-' + _index]
            ? this.elementsRemark['ball-' + _array[1] + '-2d-' + _index].errorType
            : ''
          this.selectedObject.mPoint.x = event.item.customCenter.x
          this.selectedObject.mPoint.y = event.item.customCenter.y
          this.selectedObject.markType = event.item.markType

          let isZoom = true
          // 矩形拖拉修改尺寸
          // let rect = event.item;

          let path = this.annotation2dMap[_index].get(this.selectedObject.a1)
          if (path && this.markType !== 10)
            this.sync_highlight_objects(
              '2d',
              this.selectedObject,
              { length: 0, width: path.bounds.width.toFixed(2), height: path.bounds.height.toFixed(2) },
              isZoom
            )
        }
      }
    },
    paperToolOnMouseMove(event) {
      this.HideTip()
      document.querySelector('body').style.cursor = 'default'

      // let hitResults = Paper.project.hitTestAll(event.point, this.moveHitOptions)
      // for (let hitResult of hitResults) {
      //   Paper.project.activeLayer.addChild(hitResult.item)
      //   if (hitResult && hitResult.item.markType === 'poly' && hitResult.item.closed) {
      //     if (hitResult.item.bounds.contains(event.point)) {
      //       event.item = hitResult.item
      //     }
      //   }
      // }

      if (event.item && (event.item.tag || event.item.markType)) {
        if (
          event.item.markType === 'point' ||
          event.item.markType === 'rectPoint1' ||
          event.item.markType === 'point1'
        ) {
          event.item.strokeWidth = this.pointStrokeWidth * 3
        } else if (event.item.markType === 'poly') {
          if (event.item.closed) event.item.strokeWidth = this.polyStrokeWidth * 2
          else event.item.strokeWidth = this.lineStrokeWidth * 2
        } else if (event.item.markType === 'rect_line' || event.item.markType === 'rect_mid') {
          event.item.strokeWidth = this.lineStrokeWidth * 2
        } else {
          const args = ['point', 'rectPoint1', 'poly', 'rect_line', 'rect_mid']
          event.item.project.activeLayer.children.forEach((child) => {
            if (args.indexOf(child.markType) != -1) {
              if (child.markType === 'point' || child.markType === 'rectPoint1' || child.markType === 'point1') {
                child.strokeWidth = this.pointStrokeWidth
              } else if (child.markType === 'poly') {
                if (child.closed) {
                  child.strokeWidth = this.polyStrokeWidth
                } else {
                  child.strokeWidth = this.lineStrokeWidth
                }
              } else {
                child.strokeWidth = this.lineStrokeWidth
              }
            }
          })
        }

        if (event.item.tag) {
          let x = event.event.clientX
          let y = event.event.clientY
          let showTip = this.selectDictLabel(this.attributeNames, 'ShowTip')
          if (this.checkrole(['admin']) || this.checkrole(['checker']) || !showTip || showTip !== 'hide') {
            if (event.item.typeTag) this.ShowTip(event.item.tag + ';' + event.item.position, x, y, event.item.typeTag)
            else this.ShowTip(event.item.tag + ';' + event.item.position, x, y)
          }
        }

        document.querySelector('body').style.cursor = 'pointer'
      } else {
        this.HideTip()
        document.querySelector('body').style.cursor = 'default'
        try {
          if (this.mainLayer[this.canvasIndex]) {
            for (let i = 0; i < this.mainLayer.length; i++) {
              if (this.mainLayer[i]) {
                let items = this.mainLayer[i].getItems()
                for (let i = 0; i < items.length; i++) {
                  if (items[i].markType) {
                    if (items[i].markType === 'point' && !items[i].selected) {
                      items[i].strokeWidth = this.pointStrokeWidth
                    } else if (items[i].markType === 'poly') {
                      if (items[i].closed) {
                        items[i].strokeWidth = this.polyStrokeWidth
                      } else {
                        items[i].strokeWidth = this.lineStrokeWidth
                      }
                    } else if (items[i].markType === 'rect_line' || items[i].markType === 'rect_mid') {
                      items[i].strokeWidth = this.lineStrokeWidth
                    }
                  }
                }
              }
            }
          }
        } catch (e) {
          console.debug(e)
        }
      }
    },
    paperToolOnMouseDrag(event) {
      // 鼠标左键拖动
      let _index
      if (this.imgCount > 1) {
        _index = this.canvasIndex
      } else {
        _index = 1
      }
      if (event.event.buttons == 1 && event.modifiers.shift) {
        if (this.selectedPath) {
          if (this.selectedPath.markType === 'rectPoint1') {
            this.selectedPath.segments[0].point.x += event.delta.x
            this.selectedPath.segments[0].point.y += event.delta.y
            this.changeList.add(this.selectedPath.parentLabel.mMarkAnnotationId, {
              type: 'path',
              action: 'update',
              info: this.selectedPath.parentLabel,
            })
          } else if (this.selectedPath.markType === 'point1') {
            this.selectedPath.segments[0].point.x += event.delta.x
            this.selectedPath.segments[0].point.y += event.delta.y
            this.selectedPath.textObject.position.x += event.delta.x
            this.selectedPath.textObject.position.y += event.delta.y
            this.changeList.add(this.selectedPath.mMarkAnnotationId, {
              type: 'path',
              action: 'update',
              info: this.selectedPath,
            })
          } else if (this.selectedPath.markType === 'rect' /* && this.selectedPath.rectPoint1*/) {
            let delta = event.delta
            this.selectedPath.position.x += delta.x
            this.selectedPath.position.y += delta.y
            this.selectedPath.textObject.position.x += delta.x
            this.selectedPath.textObject.position.y += delta.y
            this.selectedPath.data.baseRect.position.x += delta.x
            this.selectedPath.data.baseRect.position.y += delta.y
            this.selectedPath.point1.position.x += delta.x
            this.selectedPath.point1.position.y += delta.y
            this.selectedPath.point3.position.x += delta.x
            this.selectedPath.point3.position.y += delta.y
            if (this.selectedPath.rectPoint1) {
              this.selectedPath.rectPoint1.position.x += delta.x
              this.selectedPath.rectPoint1.position.y += delta.y
            }
            this.changeList.add(this.selectedPath.mMarkAnnotationId, {
              type: 'path',
              action: 'update',
              info: this.selectedPath,
            })
            this.mainLayer[_index].addChild(this.selectedPath)
            this.mainLayer[_index].addChild(this.selectedPath.point1)
            this.mainLayer[_index].addChild(this.selectedPath.point3)
            if (this.selectedPath.rectPoint1) {
              this.mainLayer[_index].addChild(this.selectedPath.rectPoint1)
            }
          } else if (this.selectedPath.pointIndex == 2 && this.selectedPath.midPath) {
            this.selectedPath.position.x += event.delta.x
            this.selectedPath.midPath.position.x += event.delta.x
            this.changeList.add(this.selectedPath.midPath.parentLabel.mMarkAnnotationId, {
              type: 'path',
              action: 'update',
              info: this.selectedPath.midPath.parentLabel,
            })
          } else if (this.selectedPath.pointIndex == 0 || this.selectedPath.pointIndex == 1) {
            if (this.selectedPath.pointIndex == 0) {
              this.selectedPath.parentLabel.textObject.position.x += event.delta.x
              this.selectedPath.parentLabel.textObject.position.y += event.delta.y
            }
            this.selectedPath.position.x += event.delta.x
            this.selectedPath.position.y += event.delta.y

            let bounds = this.selectedPath.parentLabel.bounds
            let rect = this.selectedPath.parentLabel
            let offsetX = event.point.x - rect.data.previousPoint.x
            let offsetY = event.point.y - rect.data.previousPoint.y
            let newBounds = null
            let topLeft = null
            let bottomRight = null
            switch (rect.data.type) {
              case 1:
                topLeft = new Paper.Point(bounds.topLeft.x + offsetX, bounds.topLeft.y + offsetY)
                newBounds = new Paper.Rectangle(topLeft, bounds.bottomRight)
                break
              case 2:
                topLeft = new Paper.Point(bounds.topLeft.x, bounds.topRight.y + offsetY)
                bottomRight = new Paper.Point(bounds.topRight.x + offsetX, bounds.bottomRight.y)
                newBounds = new Paper.Rectangle(topLeft, bottomRight)
                break
              case 3:
                bottomRight = new Paper.Point(bounds.bottomRight.x + offsetX, bounds.bottomRight.y + offsetY)
                newBounds = new Paper.Rectangle(bounds.topLeft, bottomRight)
                break
              case 4:
                topLeft = new Paper.Point(bounds.topLeft.x + offsetX, bounds.topRight.y)
                bottomRight = new Paper.Point(bounds.bottomRight.x, bounds.bottomLeft.y + offsetY)
                newBounds = new Paper.Rectangle(topLeft, bottomRight)
                break
            }
            rect.bounds = newBounds
            rect.data.baseRect.bounds = newBounds
            // this.moveCircles(rect);
            this.changeCubeInfo({ length: 0, width: newBounds.width.toFixed(2), height: newBounds.height.toFixed(2) })
            rect.data.previousPoint = event.point
            if (rect.midPath) {
              rect.midPath.segments[0].point.y = rect.bounds.y
              rect.midPath.segments[1].point.y = rect.bounds.y + rect.bounds.height
              rect.midPath.pointMid.segments[0].point.y = rect.bounds.y + rect.bounds.height / 2
            }
            this.changeList.add(rect.mMarkAnnotationId, {
              type: 'path',
              action: 'update',
              info: rect,
            })
          } else if (this.selectedPath.pointIndex == 3 || this.selectedPath.pointIndex == 4) {
            this.selectedPath.position.x += event.delta.x
            this.selectedPath.position.y += event.delta.y
            this.selectedPath.parentLabel.segments[this.selectedPath.pointIndex - 3].point.x += event.delta.x
            this.selectedPath.parentLabel.segments[this.selectedPath.pointIndex - 3].point.y += event.delta.y
            this.changeList.add(this.selectedPath.parentLabel.parentLabel.mMarkAnnotationId, {
              type: 'path',
              action: 'update',
              info: this.selectedPath.parentLabel.parentLabel,
            })
          } else if (this.selectedPath.pointIndex >= 1000) {
            this.selectedPath.position.x += event.delta.x
            this.selectedPath.position.y += event.delta.y
            this.selectedPath.parentLabel.segments[this.selectedPath.pointIndex - 1000].point.x += event.delta.x
            this.selectedPath.parentLabel.segments[this.selectedPath.pointIndex - 1000].point.y += event.delta.y
            if (this.selectedPath.parentLabel.fillPath) {
              this.selectedPath.parentLabel.fillPath.segments[this.selectedPath.pointIndex - 1000].point.x +=
                event.delta.x
              this.selectedPath.parentLabel.fillPath.segments[this.selectedPath.pointIndex - 1000].point.y +=
                event.delta.y
            }
            this.changeList.add(this.selectedPath.parentLabel.mMarkAnnotationId, {
              type: 'path',
              action: 'update',
              info: this.selectedPath.parentLabel,
            })
          } else if (this.selectedPath.markRemarkId) {
            this.selectedPath.segments[0].point.x += event.delta.x
            this.selectedPath.segments[0].point.y += event.delta.y
            if (this.selectedPath.textObject) {
              this.selectedPath.textObject.position.x += event.delta.x
              this.selectedPath.textObject.position.y += event.delta.y
            }
          } else if (this.selectedPath.markType === 'poly') {
            this.selectedPath.segments.forEach((segment) => {
              segment.point.x += event.delta.x
              segment.point.y += event.delta.y
            })
            if (this.selectedPath.fillPath) {
              this.selectedPath.fillPath.segments.forEach((segment) => {
                segment.point.x += event.delta.x
                segment.point.y += event.delta.y
              })
            }
            this.selectedPath.points.forEach((point) => {
              point.segments[0].point.x += event.delta.x
              point.segments[0].point.y += event.delta.y
            })
            if (this.selectedPath.textObject) {
              this.selectedPath.textObject.position.x += event.delta.x
              this.selectedPath.textObject.position.y += event.delta.y
            }
            this.changeList.add(this.selectedPath.mMarkAnnotationId, {
              type: 'path',
              action: 'update',
              info: this.selectedPath,
            })
          }
        }
        // 左键拖拉修改矩形尺寸
        else if (this.selectedDragRect) {
          let rect = this.selectedDragRect
          if (rect.data.state === 'resizing') {
            let bounds = rect.bounds
            let offsetX = event.point.x - rect.data.previousPoint.x
            let offsetY = event.point.y - rect.data.previousPoint.y
            let newBounds = null
            let topLeft = null
            let bottomRight = null
            switch (rect.data.type) {
              case 1:
                topLeft = new Paper.Point(bounds.topLeft.x + offsetX, bounds.topLeft.y + offsetY)
                newBounds = new Paper.Rectangle(topLeft, bounds.bottomRight)
                break
              case 2:
                topLeft = new Paper.Point(bounds.topLeft.x, bounds.topRight.y + offsetY)
                bottomRight = new Paper.Point(bounds.topRight.x + offsetX, bounds.bottomRight.y)
                newBounds = new Paper.Rectangle(topLeft, bottomRight)
                break
              case 3:
                bottomRight = new Paper.Point(bounds.bottomRight.x + offsetX, bounds.bottomRight.y + offsetY)
                newBounds = new Paper.Rectangle(bounds.topLeft, bottomRight)
                break
              case 4:
                topLeft = new Paper.Point(bounds.topLeft.x + offsetX, bounds.topRight.y)
                bottomRight = new Paper.Point(bounds.bottomRight.x, bounds.bottomLeft.y + offsetY)
                newBounds = new Paper.Rectangle(topLeft, bottomRight)
                break
            }
            rect.bounds = newBounds
            rect.data.baseRect.bounds = newBounds
            this.moveCircles(rect)
            this.changeCubeInfo({ length: 0, width: newBounds.width.toFixed(2), height: newBounds.height.toFixed(2) })
            rect.data.previousPoint = event.point
          }
        }
      } else if (event.event.buttons == 2 && this.rasterLayer && this.rasterLayer[_index]) {
        document.querySelector('body').style.cursor = 'move'
        this.rasterLayer[_index].position.x += event.delta.x
        this.rasterLayer[_index].position.y += event.delta.y
        this.mainLayer[_index].position.x += event.delta.x
        this.mainLayer[_index].position.y += event.delta.y
        this.paperToolPosition[_index].rasterLayerPositionX += event.delta.x
        this.paperToolPosition[_index].rasterLayerPositionY += event.delta.y
        this.paperToolPosition[_index].mainLayerPositionX += event.delta.x
        this.paperToolPosition[_index].mainLayerPositionY += event.delta.y
      }
    },
    paperToolOnMouseup(event) {
      document.querySelector('body').style.cursor = 'default'
      // 鼠标左键
      if (event.event.buttons == 0) {
        // 左键拖拉修改矩形尺寸
        this.selectedDragRect = null
        if (this.mainLayer[this.canvasIndex]) {
          let items = this.mainLayer[this.canvasIndex].getItems()
          for (let i = 0; i < items.length; i++) {
            if (items[i].tag) {
              items[i].data.state = null
            }

            if (items[i].markType && items[i].markType === 'point') {
              // this.mainLayer[this.canvasIndex].addChild(items[i])
              this.projects[this.canvasIndex].activeLayer.addChild(items[i])
            }
          }
        }

        if (this.selectedPath) {
          let _index = event.item.project.activeLayer.imageIndex
          let _position = this.rasterLayer[_index].globalToLocal(event.point)
          if (this.selectedPath.markRemarkId) {
            updateRemarkBall({
              remarkId: this.selectedPath.markRemarkId,
              x: _position.x,
              y: _position.y,
            })
            const storeKey = 'TaskId:' + this.taskId + ';mQaResultId:' + this.mQaResultId
            this.remarkList.delete(storeKey)
            this.selectedPath = null
          }
        }
      }
    },
    paperToolOnKeyDown(event) {
      if (event.event.shiftKey === true && event.key === 'delete') {
        if (this.selectedPath && this.selectedPath.markType) {
          if (this.selectedPath.pathArray) {
            alert('暂不支持删除三维框。')
            return
          }

          if (this.selectedPath.parentLabel) {
            let rect = this.selectedPath.parentLabel
            if (this.selectedPath.markType === 'rect_line') {
              this.selectedPath.rangePoint1.remove()
              this.selectedPath.rangePoint2.remove()
              rect.rangePath = null
              this.selectedPath.remove()
            } else if (this.selectedPath.markType === 'rect_mid') {
              this.selectedPath.pointMid.remove()
              rect.midPath = null
              this.selectedPath.remove()
            }
            this.changeList.add(rect.mMarkAnnotationId, {
              type: 'path',
              action: 'update',
              info: rect,
            })
          } else if (this.selectedPath.markType === 'rect') {
            this.$confirm('确定删除选中的矩形框吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              if (this.selectedPath.point1) {
                this.selectedPath.point1.remove()
                this.selectedPath.point3.remove()
              }
              if (this.selectedPath.midPath) {
                this.selectedPath.midPath.pointMid.remove()
                this.selectedPath.midPath.remove()
              }
              if (this.selectedPath.rangePath) {
                this.selectedPath.rangePath.rangePoint1.remove()
                this.selectedPath.rangePath.rangePoint2.remove()
                this.selectedPath.rangePath.remove()
              }
              if (this.selectedPath.data && this.selectedPath.data.baseRect) {
                this.selectedPath.data.baseRect.remove()
              }
              if (this.selectedPath.textObject) {
                this.selectedPath.textObject.remove()
              }
              if (this.selectedPath.rectPoint1) {
                this.selectedPath.rectPoint1.remove()
              }
              this.selectedPath.remove()
              this.changeList.add(this.selectedPath.mMarkAnnotationId, {
                type: 'path',
                action: 'delete',
                info: this.selectedPath,
              })
            })
          } else {
            this.$confirm('确定删除选中的标注目标吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              if (this.selectedPath.textObject) {
                this.selectedPath.textObject.remove()
              }
              if (this.selectedPath.points) {
                this.selectedPath.points.forEach((point) => {
                  point.remove()
                })
              }
              if (this.selectedPath.fillPath) {
                this.selectedPath.fillPath.remove()
              }
              this.selectedPath.remove()
              this.changeList.add(this.selectedPath.mMarkAnnotationId, {
                type: 'path',
                action: 'delete',
                info: { mMarkAnnotationId: this.selectedPath.mMarkAnnotationId },
              })
            })
          }
        }
        return false
      } else if (event.event.shiftKey === true && event.key === 'z') {
        Paper.project.activeLayer.children.forEach((child) => {
          child.selected = false
          if (child.markType === 'poly') {
            if (child.fillPath) {
              child.fillPath.opacity = 0.7
              child.opacity = 0
              child.points.forEach((point) => {
                point.opacity = 0
              })
            }
          }
        })
      }
    },
    moveCircles(rect) {
      let circles = rect.data.corners.children
      for (let i = 0; i < circles.length; i++) {
        circles[i].position = rect.segments[i].point
      }
    },
    // 加载质检图片列表
    loadDrawing(currentIndex, mQaResultId, showAttributesText = true, playMode = false) {
      if (this.selectDictLabel(this.attributeNames, 'labelTools')) {
        let labelTools = JSON.parse(this.selectDictLabel(this.attributeNames, 'labelTools'))
        labelTools.forEach((element) => {
          this.labelTools[element] = true
        })
      }
      if (showAttributesText) this.attributesTextOpacity = 1
      else this.attributesTextOpacity = 0
      this.currentIndex = currentIndex
      this.mQaResultId = mQaResultId
      if (playMode) {
        this.remarkBallList = null
        this.loadDrawingProceed()
      } else {
        const storeKey = 'TaskId:' + this.taskId + ';mQaResultId:' + this.mQaResultId
        const readValue = this.remarkList.get(storeKey)
        if (readValue) {
          this.remarkBallList = readValue
          this.loadDrawingProceed()
        } else {
          listRemarkBall({ taskId: this.taskId, mQaResultId: this.mQaResultId }).then((response) => {
            if (response && response.rows) this.remarkBallList = response.rows
            this.loadDrawingProceed()
          })
        }
      }
    },
    async loadDrawingProceed() {
      let callback = (imageIndex) => {
        if (imageIndex == this.imgCount) {
          // this.setPosition(this.selectedObjectA1, null, '', null, null, null, null, null);
          this.$store.state.markData.playStatus.pic = true
          if (this.highLightParams) {
            this.highlight_objects(
              this.highLightParams.eventSource,
              this.highLightParams.selectedObject,
              this.highLightParams.isZoom,
              this.highLightParams.hideOther
            )
          }
        }
      }
      this.remarkMap.clear()

      // 多路图片时索引从1开始。
      let _count = this.imgCount + 1
      for (let i = 1; i < _count; i++) {
        const imgKey = this.mQaResultId + ':img' + i
        const readValue = this.markAnnotations.get('MA:' + imgKey)
        const imageInfo = await getImageWithCache(this.mQaResultId, i, readValue)
        // console.log(imageInfo)
        this.Drawing2D(imageInfo.blob, imageInfo.annotation, i, callback)
      }
    },
    // 重置图片基础数据
    resetDrawing(imageIndex) {
      this.projects[imageIndex].view.zoom = 1
      this.projects[imageIndex].view.center = this.projects[imageIndex].view.initCenter
      this.rasterLayer[imageIndex].position.x -= this.paperToolPosition[imageIndex].rasterLayerPositionX
      this.rasterLayer[imageIndex].position.y -= this.paperToolPosition[imageIndex].rasterLayerPositionY
      this.mainLayer[imageIndex].position.x -= this.paperToolPosition[imageIndex].mainLayerPositionX
      this.mainLayer[imageIndex].position.y -= this.paperToolPosition[imageIndex].mainLayerPositionY
      this.paperToolPosition[imageIndex].center = this.projects[imageIndex].view.initCenter
      this.paperToolPosition[imageIndex].zoom = 1
      this.paperToolPosition[imageIndex].fontSize = this.pointTextFontSize
      this.paperToolPosition[imageIndex].rasterLayerPositionX = 0
      this.paperToolPosition[imageIndex].rasterLayerPositionY = 0
      this.paperToolPosition[imageIndex].mainLayerPositionX = 0
      this.paperToolPosition[imageIndex].mainLayerPositionY = 0
    },
    clear_highlight_objects() {
      for (let p = 0; p < this.projects.length; p++) {
        let _project = this.projects[p]
        if (!_project) continue
        for (let i = 0; i < _project.activeLayer.children.length; i++) {
          if (_project.activeLayer.children[i].tag || _project.activeLayer.children[i].typeTag) {
            _project.activeLayer.children[i].selected = false
            if (_project.activeLayer.children[i].point1) {
              _project.activeLayer.children[i].point1.opacity = 0
              _project.activeLayer.children[i].point3.opacity = 0
            }
          }
        }
      }
    },
    // 定位缩放选中矩形并高亮
    highlight_objects(eventSource, selectedObject, isZoom = true, hideOther = false) {
      if (this.$store.state.markData.playStatus.pic) {
        this.highLightParams = null
      } else {
        this.highLightParams = {
          eventSource,
          selectedObject,
          isZoom,
          hideOther,
        }
        return
      }
      this.selectedObject = selectedObject
      // 高亮2D对象
      if (!isZoom && this.selectedObject.position == null) {
        for (let m = 0; m < this.mainLayer.length; m++) {
          if (!this.mainLayer[m]) continue
          let items = this.mainLayer[m].getItems()
          for (let i = 0; i < items.length; i++) {
            if (items[i].tag) {
              let itemA1 = items[i].tag.split(';')[1]
              if (itemA1 == this.selectedObject.a1) {
                // items[i].selected = true
                // items[i].project.activeLayer.addChild(items[i]);
                if (items[i].point1) {
                  items[i].point1.opacity = 1
                  items[i].point3.opacity = 1
                }
              } else if (hideOther && items[i].hide) {
                items[i].hide()
              } else if (!hideOther && items[i].show) {
                items[i].show()
              }
            }
          }
        }
      } else {
        for (let m = 0; m < this.mainLayer.length; m++) {
          if (!this.mainLayer[m]) continue
          let items = this.mainLayer[m].getItems()
          this.resetDrawing(m)
          let _path = null
          for (let i = 0; i < items.length; i++) {
            if (items[i].markRemarkId) {
              items[i].textObject.fontSize = this.pointTextFontSize
            } else if (items[i].tag) {
              items[i].selected = false
              if (hideOther && items[i].hide) {
                items[i].hide()
              } else if (!hideOther && items[i].show) {
                items[i].show()
              }
              if (items[i].textObject) items[i].textObject.fontSize = this.pointTextFontSize
              if (items[i].point1) {
                items[i].point1.opacity = 0
                items[i].point3.opacity = 0
              }
              let itemA1 = items[i].tag.split(';')[1]
              if (itemA1 == this.selectedObject.a1 && items[i].markType && items[i].markType == 'rect') {
                _path = items[i]
              }
            }
          }
          if (!_path && !this.selectedObject.position) continue
          let paperElement = _path
          if (!_path && this.selectedObject.position) {
            if (!this.selectedObject.imageIndex || m != parseInt(this.selectedObject.imageIndex)) continue
            let centerPoint = new Paper.Point(this.selectedObject.position.x, this.selectedObject.position.y)

            let ppp = this.rasterLayer[m].localToGlobal(
              new Paper.Point(parseFloat(this.selectedObject.position.x), parseFloat(this.selectedObject.position.y))
            )
            _path = {
              bounds: new Paper.Rectangle(ppp, new Paper.Size(30, 30)),
            }
          }
          let _view = this.projects[m].view
          let _zoomPos = _path.bounds.center
          let _count = 0
          while (
            _view.size.height - _path.bounds.height * 2 > 8 &&
            _view.size.width - _path.bounds.width * 2 > 8 &&
            _count < 20
          ) {
            if (_path.bounds.center.x < _view.bounds.center.x && _path.bounds.center.y < _view.bounds.center.y) {
              _zoomPos = _path.bounds.topLeft
            } else if (_path.bounds.center.x < _view.bounds.center.x && _path.bounds.center.y > _view.bounds.center.y) {
              _zoomPos = _path.bounds.bottomLeft
            } else if (_path.bounds.center.x > _view.bounds.center.x && _path.bounds.center.y > _view.bounds.center.y) {
              _zoomPos = _path.bounds.bottomRight
            } else if (_path.bounds.center.x > _view.bounds.center.x && _path.bounds.center.y < _view.bounds.center.y) {
              _zoomPos = _path.bounds.topRight
            }
            try {
              this.zoom(-3, _zoomPos, m)
              _view = this.projects[m].view
              _count++
            } catch (e) {
              console.debug('highlight_objects', e)
            }
          }
          if (paperElement) {
            // paperElement.selected = true
            paperElement.show()
            if (paperElement.point1) {
              paperElement.point1.opacity = 1
              paperElement.point3.opacity = 1
            }
          }
        }
      }
    },
    showMarkAnnotations(mMarkAnnotationIds) {
      for (let m = 0; m < this.mainLayer.length; m++) {
        if (!this.mainLayer[m]) continue
        let items = this.mainLayer[m].getItems()
        for (let i = 0; i < items.length; i++) {
          if (items[i].mMarkAnnotationId) {
            const markAnnotation = items[i]
            if (mMarkAnnotationIds.indexOf(markAnnotation.mMarkAnnotationId) != -1) {
              items[i].show()
            } else {
              items[i].hide()
            }
          }
        }
      }
    },
    // 初始化底图图片资源
    Drawing2D(imageSrc, annotation_2d, imageIndex, callback) {
      let pointStrokeWidth = this.selectDictLabel(this.attributeNames, 'pointStrokeWidth')
      if (pointStrokeWidth && parseFloat(pointStrokeWidth) >= 0) {
        this.pointStrokeWidth = parseFloat(pointStrokeWidth)
      }
      let polyStrokeWidth = this.selectDictLabel(this.attributeNames, 'polyStrokeWidth')
      if (polyStrokeWidth && parseFloat(polyStrokeWidth) >= 0) {
        this.polyStrokeWidth = parseFloat(polyStrokeWidth)
      }
      let lineStrokeWidth = this.selectDictLabel(this.attributeNames, 'lineStrokeWidth')
      if (lineStrokeWidth && parseFloat(lineStrokeWidth) >= 0) {
        this.lineStrokeWidth = parseFloat(lineStrokeWidth)
      }
      let rectStrokeWidth = this.selectDictLabel(this.attributeNames, 'rectStrokeWidth')
      if (rectStrokeWidth && parseFloat(rectStrokeWidth) >= 0) {
        this.rectStrokeWidth = parseFloat(rectStrokeWidth)
      }

      const UrlCreator = window.webkitURL || window.URL
      const lableImage = typeof imageSrc == 'string' ? imageSrc : UrlCreator.createObjectURL(imageSrc)
      const imageKey = 'lableImg' + imageIndex
      this[imageKey] = lableImage

      this.annotation2d[imageIndex] = annotation_2d
      this.onLoadImage(imageIndex, callback)
    },
    // 加载图片，并初始化2D图片操作组件对象
    onLoadImage(imageIndex, callback) {
      let image = document.getElementById(this.id + 'sourceImage' + imageIndex)

      if (!image) return
      const imageKey = 'lableImg' + imageIndex
      if (image.onload) image.onload = null
      if (image) {
        image.src = this[imageKey]
      }
      image.onload = () => {
        this.imageWidth = image.width
        this.imageHeight = image.height
        let canvas = document.getElementById(this.id + 'canvasId' + imageIndex)

        canvas.width = image.width
        canvas.height = image.height
        let project = new Paper.Project(canvas)
        project.name = 'project' + imageIndex
        project.fileName = this.annotation2d[imageIndex].fileName
        project.mQaResultId = this.annotation2d[imageIndex].qaResultId
        this.projects[imageIndex] = project
        this.rasterLayer[imageIndex] = new Paper.Layer()
        if (this.mainLayer[imageIndex]) {
          for (let i = 0; i < this.mainLayer[imageIndex].children.length; i++) {
            this.mainLayer[imageIndex].remove(this.mainLayer[imageIndex].children[i])
          }
        }
        this.mainLayer[imageIndex] = new Paper.Layer()
        this.mainLayer[imageIndex].imageIndex = imageIndex
        this.rasterLayer[imageIndex].applyMatrix = false
        this.rasterLayer[imageIndex].activate()
        this.raster[imageIndex] = new Paper.Raster(image)
        this.raster[imageIndex].visible = false
        project.view.viewSize = new Paper.Size(this.imageWidth, this.imageHeight)
        this.raster[imageIndex].visible = true
        this.raster[imageIndex].position = project.view.center

        this.mainLayer[imageIndex].rasterLayer = this.rasterLayer[imageIndex]

        this.createPaths(imageIndex)
        this.resizeCanvas(imageIndex)
        callback(imageIndex)
      }
    },
    // 绘制图片上的标注信息
    createPaths(imageIndex) {
      let annot = this.annotation2d[imageIndex]
      // this.pointStrokeWidth = 5
      let fontSize
      if (this.paperToolPosition[imageIndex].fontSize /*&& this.markType !== 10*/) {
        fontSize = this.paperToolPosition[imageIndex].fontSize
      } else {
        fontSize = this.pointTextFontSize
        if (this.imageWidth > 1000 && this.markType === 10) {
          if (this.imageWidth > 1500) fontSize *= 3.5
          else fontSize *= 2
        }
      }

      if (annot && !annot.object) {
        return
      }
      if (!this.annotation2dMap[imageIndex]) {
        this.annotation2dMap[imageIndex] = new Map()
      }
      this.mainLayer[imageIndex].activate()

      let maxZoom = this.selectDictLabel(this.attributeNames, 'MaxZoom')
      if (maxZoom && parseInt(maxZoom) > 0 && parseInt(maxZoom) <= 80) {
        this.maxZoom = parseInt(maxZoom)
      }

      let splitLine = this.selectDictLabel(this.attributeNames, 'splitLine2d')
      if (!splitLine) splitLine = this.selectDictLabel(this.attributeNames, 'splitLine')
      if (splitLine) {
        try {
          if (splitLine.toString().indexOf('{') != -1) {
            let splitLineJson = JSON.parse(splitLine)
            splitLineJson.forEach((lineJson) => {
              let descriptionText = new Paper.PointText({
                position: new Paper.Point(0, this.imageHeight * parseFloat(lineJson['value'])),
                fillColor: lineJson['color'],
                justification: 'left',
                fontSize: fontSize,
                locked: true,
              })
              descriptionText.strokeWidth = 2
              descriptionText.content = lineJson['description']
              descriptionText.opacity = this.attributesTextOpacity

              let path = new Paper.Path()
              path.add(new Paper.Point(0, this.imageHeight * parseFloat(lineJson['value'])))
              path.add(new Paper.Point(this.imageWidth, this.imageHeight * parseFloat(lineJson['value'])))
              path.strokeColor = lineJson['color']
              path.strokeWidth = 1
              path.strokeScaling = false
              path.closed = false
              path.opacity = 1
              path.textObject = descriptionText
              path.tag = lineJson['description']
            })
          } else {
            let path = new Paper.Path()
            path.add(new Paper.Point(0, this.imageHeight * parseFloat(splitLine)))
            path.add(new Paper.Point(this.imageWidth, this.imageHeight * parseFloat(splitLine)))
            path.strokeColor = 'red'
            path.strokeWidth = 1
            path.strokeScaling = false
            path.closed = false
            path.opacity = 1
          }
        } catch (e) {
          console.debug('Add split line failed.', e)
        }
      }
      for (let i = 0; i < annot.object.length; i++) {
        if (!annot.object[i].markType) annot.object[i].markType = 'rect'
        const markType = annot.object[i].markType
        if (annot.object[i].markType) {
          if (annot.object[i].twoD.other_attributes.labels) {
            try {
              const jsonLabels = JSON.parse(annot.object[i].twoD.other_attributes.labels)
              for (const key in jsonLabels) {
                annot.object[i].twoD.other_attributes[key] = jsonLabels[key]
              }
            } catch (e) {
              console.debug(e)
            }
          }

          // 获取标注标签原始值
          annot.object[i].getLabels = function (selectDictLabel, attributeNames) {
            let pre = ''
            let label = this.name + ':2;'
            for (let j = 1; j < 9; j++) {
              label += this.twoD.other_attributes['a' + j] + ';'
            }
            for (let j = 1; j < 9; j++) {
              label += this.twoD.other_attributes['b' + j] + ';'
            }
            return label
          }

          // 获取标注标签转义，用于网页显示
          annot.object[i].getLabelDescriptions = function (selectDictLabel, attributeNames) {
            let message = ''
            let jsonObject
            let _values = undefined
            try {
              if (selectDictLabel(attributeNames, markType + '_labelName')) {
                jsonObject = JSON.parse(selectDictLabel(attributeNames, markType + '_labelName'))
                _values = jsonObject.values[this.name]
              } else {
                jsonObject = JSON.parse(selectDictLabel(attributeNames, 'labelName'))
                _values = jsonObject.values[this.name]
              }
            } catch (e) {}
            message += _values === undefined ? this.name : _values
            for (let j = 1; j <= 8; j++) {
              if (this.twoD.other_attributes['a' + j] && this.twoD.other_attributes['a' + j] != 'null') {
                try {
                  let pre = ''
                  if (selectDictLabel(attributeNames, this.name + '_a' + j + '_2d')) pre = this.name + '_'
                  else if (selectDictLabel(attributeNames, markType + '_a' + j + '_2d')) pre = markType + '_'
                  let jsonObject = JSON.parse(selectDictLabel(attributeNames, pre + 'a' + j + '_2d'))
                  if (jsonObject.typeName && (jsonObject.typeName == 'track_id' || jsonObject.typeName == 'trackId')) {
                    message += '-' + this.twoD.other_attributes.a1
                  } else {
                    let _values = jsonObject.values['' + this.twoD.other_attributes['a' + j]]
                    if (_values === undefined) continue
                    message += '-' + _values
                  }
                } catch (e) {}
              }
            }
            for (let j = 1; j <= 8; j++) {
              if (this.twoD.other_attributes['b' + j] && this.twoD.other_attributes['b' + j] != 'null') {
                try {
                  let pre = ''
                  if (selectDictLabel(attributeNames, this.name + '_b' + j + '_2d')) pre = this.name + '_'
                  else if (selectDictLabel(attributeNames, markType + '_b' + j + '_2d')) pre = markType + '_'
                  let jsonObject = JSON.parse(selectDictLabel(attributeNames, pre + 'b' + j + '_2d'))
                  let _values = jsonObject.values[this.twoD.other_attributes['b' + j]]
                  if (_values === undefined) continue
                  message += '-' + _values
                } catch (e) {}
              }
            }
            return message
          }

          let markInstance
          if (
            annot.object[i].markType === 'point' ||
            annot.object[i].markType === 'keypoints' ||
            annot.object[i].markType === 'onepoint'
          ) {
            markInstance = this.drawPoint(fontSize, imageIndex, annot.object[i])
          } else if (annot.object[i].markType === 'range') {
            markInstance = this.drawRange(fontSize, imageIndex, annot.object[i])
          } else if (annot.object[i].markType === 'rect3d') {
            markInstance = this.drawRect3d(fontSize, imageIndex, annot.object[i])
          } else if (annot.object[i].markType === 'rect') {
            markInstance = this.drawRect(fontSize, imageIndex, annot.object[i])
          } else if (annot.object[i].markType === 'rectPoint1') {
            markInstance = this.drawRectPoint1(fontSize, imageIndex, annot.object[i])
          } else if (annot.object[i].markType === 'grid') {
            markInstance = this.drawGrid(fontSize, imageIndex, annot.object[i])
          } else if (annot.object[i].markType === 'line' || annot.object[i].markType === 'poly') {
            markInstance = this.drawPoly(fontSize, imageIndex, annot.object[i], annot.object[i].markType === 'line')
          } else if (annot.object[i].markType === 'point1') {
            markInstance = this.drawPoint1(fontSize, imageIndex, annot.object[i])
          }
        } else {
          markInstance = this.drawRect(fontSize, imageIndex, annot.object[i])
        }
      }

      // 非矩形框、非多边形放在最上层
      this.mainLayer[imageIndex].children.forEach((child) => {
        if (child.rectPoint1 || !(child.markType === 'rect' || (child.markType === 'poly' && child.closed))) {
          // this.mainLayer[imageIndex].addChild(child)
          this.projects[imageIndex].activeLayer.addChild(child)
        }
      })

      this.mainLayer[imageIndex].children.forEach((child) => {
        if (child.markType === 'point' || child.markType === 'rectPoint1') {
          // this.mainLayer[imageIndex].addChild(child)
          this.projects[imageIndex].activeLayer.addChild(child)
        }
      })

      if (this.remarkBallList) {
        this.drawRemark(this.remarkBallList, imageIndex, fontSize)
      }
    },
    drawRemark(remarkBallList, imageIndex, fontSize) {
      this.mainLayer[imageIndex].activate()
      remarkBallList.forEach((ball) => {
        if (ball.mType && ball.mType !== '3d') {
          let remarkIndex = parseInt(ball.mType.replace('2d-', ''))
          if (imageIndex === remarkIndex) {
            let errorDes = '验'
            let objectCenter = new Paper.Point(parseFloat(ball.x), parseFloat(ball.y))
            let textBackground = new Paper.Path()
            textBackground.add(objectCenter)
            textBackground.closed = true
            textBackground.strokeColor = 'red'
            textBackground.strokeWidth = 18
            textBackground.strokeCap = 'round'
            textBackground.strokeScaling = false
            textBackground.opacity = 1
            let remarkText = new Paper.PointText({
              position: objectCenter,
              fillColor: 'white',
              justification: 'center',
              fontSize: fontSize,
              locked: true,
            })
            remarkText.strokeWidth = 1
            remarkText.content = errorDes
            remarkText.opacity = 1
            remarkText.textBackground = textBackground
            textBackground.tag = ball.remark
            textBackground.typeTag = '错误描述：'
            textBackground.textObject = remarkText
            textBackground.markRemarkId = ball.remarkId
          }
        }
      })
    },
    drawPoint(fontSize, imageIndex, annotObject) {
      let x, y
      let pointMark
      let globalPoint = false
      if (/*annotObject.twoD.other_attributes.a1 === 'point_3' || */ annotObject.markType === 'onepoint') {
        this.mainLayer[imageIndex].globalPoint = {
          markType: 'onepoint',
          fileName: this.projects[imageIndex].fileName,
          mQaResultId: this.projects[imageIndex].mQaResultId,
          mMarkAnnotationId: annotObject.mMarkAnnotationId,
          name: annotObject.name,
          type: '2d',
          a1: annotObject.twoD.other_attributes.a1,
          a2: annotObject.twoD.other_attributes.a2,
          a3: annotObject.twoD.other_attributes.a3,
          a4: annotObject.twoD.other_attributes.a4,
          a5: annotObject.twoD.other_attributes.a5,
          a6: annotObject.twoD.other_attributes.a6,
          a7: annotObject.twoD.other_attributes.a7,
          a8: annotObject.twoD.other_attributes.a8,
        }
        globalPoint = true
        x = this.imageWidth / 2
        y = this.imageHeight / 20
        fontSize = fontSize * 1.5
      } else {
        x = parseFloat(annotObject.twoD.points[0].x)
        y = parseFloat(annotObject.twoD.points[0].y)
      }

      // let remarkText = this.drawRemark(x, y, annotObject.twoD.other_attributes.a2, fontSize);
      pointMark = new Paper.Point(x, y)
      let pointView = new Paper.Path()
      pointView.add(pointMark)
      pointView.customCenter = pointMark
      pointView.closed = true
      if (annotObject.name + '_脑补点' === annotObject.twoD.other_attributes.a2) {
        pointView.strokeColor = 'red'
      } else {
        pointView.strokeColor = 'yellow'
      }
      pointView.strokeWidth = this.pointStrokeWidth
      pointView.strokeCap = 'round'
      pointView.markType = 'keypoints'
      pointView.strokeScaling = false
      pointView.opacity = 1
      let descriptionText = new Paper.PointText({
        position: new Paper.Point(x, y - 2),
        fillColor: pointView.strokeColor,
        justification: 'center',
        fontSize: fontSize,
        locked: true,
      })
      descriptionText.strokeWidth = 1
      // if(globalPoint === true) {
      let globalText = ''
      try {
        // let gArray = annotObject.twoD.other_attributes.a2.split(",");
        // for(let g = 0; g < gArray.length; g++) {
        //   try {
        //     let jsonObject = JSON.parse(this.selectDictLabel(this.attributeNames, "g" + g));
        //     globalText += (jsonObject.values[gArray[g]] ? jsonObject.values[gArray[g]] : gArray[g]) + "-";
        //   }
        //   catch{
        //     globalText += gArray[g] + "-";
        //   }
        // }
        let attrs = [
          annotObject.name,
          annotObject.twoD.other_attributes.a1,
          annotObject.twoD.other_attributes.a2,
          annotObject.twoD.other_attributes.a3,
          annotObject.twoD.other_attributes.a4,
          annotObject.twoD.other_attributes.a5,
          annotObject.twoD.other_attributes.a6,
          annotObject.twoD.other_attributes.a7,
          annotObject.twoD.other_attributes.a8,
        ]
        for (let i = 1; i <= 9; i++) {
          if (attrs[i] && attrs[i] != null && attrs[i] != '' && attrs[i] != 'null') {
            try {
              let jsonObject = JSON.parse(this.selectDictLabel(this.attributeNames, 'a' + i + '_2d'))
              let _values = jsonObject.values[attrs[i]]
              if (_values === undefined) continue
              globalText += '-' + _values
            } catch (e) {}
          }
        }
      } catch (err) {
        globalText = annotObject.twoD.other_attributes.a2 + '-'
      }
      descriptionText.content = annotObject.getLabelDescriptions(this.selectDictLabel, this.attributeNames)
      if (globalPoint === true) {
        pointView.opacity = 0
      }
      // else {
      //   descriptionText.content = annotObject.name;
      // }
      descriptionText.opacity = this.attributesTextOpacity
      descriptionText.pointView = pointView
      pointView.textObject = descriptionText
      pointView.tag =
        annotObject.name +
        ':2;' +
        annotObject.twoD.other_attributes.a1 +
        ';' +
        annotObject.twoD.other_attributes.a2 +
        ';' +
        annotObject.twoD.other_attributes.a3 +
        ';' +
        annotObject.twoD.other_attributes.a4 +
        ';' +
        annotObject.twoD.other_attributes.a5 +
        ';' +
        annotObject.twoD.other_attributes.a6 +
        ';' +
        annotObject.twoD.other_attributes.a7 +
        ';' +
        annotObject.twoD.other_attributes.a8 +
        ';'
      // pointView.missObject = remarkText;
      pointView.customCenter = {
        x: x,
        y: y,
      }
      pointView.mMarkAnnotationId = annotObject.mMarkAnnotationId
      return pointView
    },
    drawPoint1(fontSize, imageIndex, annotObject) {
      let x = parseFloat(annotObject.twoD.points[0].x)
      let y = parseFloat(annotObject.twoD.points[0].y)
      let elementColor = this.selectDictLabel(this.colorNames, annotObject.name)
      let message = annotObject.getLabelDescriptions(this.selectDictLabel, this.attributeNames)

      let path = new Paper.Path()
      path.add(new Paper.Point(x, y))
      path.strokeCap = 'round'
      path.strokeColor = elementColor
      path.strokeWidth = 4 //this.pointStrokeWidth
      path.strokeScaling = false
      path.closed = true
      path.opacity = 1
      path.markType = 'point1'
      path.tag = annotObject.getLabels(this.selectDictLabel, this.attributeNames)
      path.customCenter = { x, y }

      // 标注属性描述文字
      let descriptionText = new Paper.PointText({
        position: new Paper.Point(x, y - 2),
        fillColor: elementColor,
        justification: 'left',
        fontSize: fontSize,
        locked: true,
      })
      descriptionText.strokeWidth = 2
      descriptionText.content = message
      descriptionText.opacity = this.attributesTextOpacity

      path.textObject = descriptionText

      path.mMarkAnnotationId = annotObject.mMarkAnnotationId

      path.pointToLocal = (point) => {
        return this.rasterLayer[imageIndex].globalToLocal(point)
      }

      path.hide = () => {
        path.textObject.opacity = 0
        path.opacity = 0
      }
      path.show = () => {
        path.textObject.opacity = 1
        path.opacity = 1
      }

      this.annotation2dMap[imageIndex].set(annotObject.twoD.other_attributes.a1, path)
      return path
    },
    drawRange(fontSize, imageIndex, annotObject) {
      var x1 = parseFloat(annotObject.twoD.bndbox.xmin)
      var y1 = parseFloat(annotObject.twoD.bndbox.ymin)
      var x2 = parseFloat(annotObject.twoD.bndbox.xmax)
      var y2 = parseFloat(annotObject.twoD.bndbox.ymax)
      // let remarkText = this.drawRemark(x1, y1, annotObject.twoD.other_attributes.a2, fontSize);
      let elementColor = '#00ff00' //this.selectDictLabel(this.colorNames, annotObject.name);
      let message = ''
      let attrs = [
        annotObject.name,
        annotObject.twoD.other_attributes.a1,
        annotObject.twoD.other_attributes.a2,
        annotObject.twoD.other_attributes.a3,
        annotObject.twoD.other_attributes.a4,
        annotObject.twoD.other_attributes.a5,
        annotObject.twoD.other_attributes.a6,
        annotObject.twoD.other_attributes.a7,
        annotObject.twoD.other_attributes.a8,
      ]
      let jsonObject
      let _values = undefined
      try {
        jsonObject = JSON.parse(this.selectDictLabel(this.attributeNames, 'labelName'))
        _values = jsonObject.values[annotObject.name]
      } catch (e) {}
      message += _values === undefined ? annotObject.name : _values
      if (annotObject.twoD.other_attributes.a1) message += '-' + annotObject.twoD.other_attributes.a1
      for (let i = 1; i <= 9; i++) {
        if (attrs[i] && attrs[i] != null && attrs[i] != '' && attrs[i] != 'null') {
          try {
            let jsonObject = JSON.parse(this.selectDictLabel(this.attributeNames, 'a' + i + '_2d'))
            let _values = jsonObject.values[attrs[i]]
            if (_values === undefined) continue
            message += '-' + _values
          } catch (e) {}
        }
      }
      let fac = parseFloat(Math.min(Math.abs(x2 - x1), Math.abs(y2 - y1)) / 14)

      // 标注属性描述文字
      let descriptionText = new Paper.PointText({
        position: new Paper.Point(Math.min(x1, x2) + fac, Math.min(y1, y2)),
        fillColor: elementColor,
        justification: 'left',
        fontSize: fontSize,
        locked: true,
      })
      descriptionText.strokeWidth = 1
      descriptionText.content = annotObject.twoD.other_attributes.a2
      descriptionText.opacity = this.attributesTextOpacity

      let path = new Paper.Path()
      path.add(new Paper.Point(x1, y1))
      path.add(new Paper.Point(x2, y1))
      path.add(new Paper.Point(x2, y2))
      path.add(new Paper.Point(x1, y2))
      path.strokeColor = elementColor
      path.strokeWidth = 1
      path.strokeScaling = false
      path.closed = true
      path.opacity = 1
      path.tag = message
      path.textObject = descriptionText
      path.customCenter = {
        x: (x1 + x2) / 2,
        y: (y1 + y2) / 2,
      }
      // path.missObject = remarkText;
      path.mMarkAnnotationId = annotObject.mMarkAnnotationId

      this.annotation2dMap[imageIndex].set(annotObject.twoD.other_attributes.a2, path)
      return path
    },
    drawPoly(fontSize, imageIndex, annotObject, isLine) {
      let x1 = parseFloat(annotObject.twoD.points[0].x)
      let y1 = parseFloat(annotObject.twoD.points[0].y)
      let x2 = 0
      let y2 = 0
      let elementColor = this.selectDictLabel(this.colorNames, annotObject.name)
      let message = annotObject.getLabelDescriptions(this.selectDictLabel, this.attributeNames)

      let path = new Paper.Path()
      path.strokeColor = elementColor
      path.strokeWidth = this.lineStrokeWidth
      path.strokeScaling = false
      path.closed = !isLine
      path.opacity = 1
      if (isLine && (annotObject.name === 'Dash' || annotObject.name === 'Dash-SP')) {
        path.dashArray = [12, 6]
      } else {
        if (!isLine) {
          path.strokeWidth = this.polyStrokeWidth
          // // let basePath = path
          let fillPath = new Paper.Path()
          for (let p = 0; p < annotObject.twoD.points.length; p++) {
            fillPath.add(
              new Paper.Point(parseFloat(annotObject.twoD.points[p].x), parseFloat(annotObject.twoD.points[p].y))
            )
          }
          fillPath.strokeColor = elementColor
          fillPath.strokeWidth = 0.01
          fillPath.strokeScaling = false
          fillPath.closed = true
          fillPath.opacity = 0.3
          fillPath.fill = true
          fillPath.fillColor = elementColor
          path.fillPath = fillPath
          fillPath.markType = 'fillPath'
          fillPath.basePath = path
        }
      }
      path.markType = 'poly'
      path.points = new Array()
      for (let p = 0; p < annotObject.twoD.points.length; p++) {
        path.add(new Paper.Point(parseFloat(annotObject.twoD.points[p].x), parseFloat(annotObject.twoD.points[p].y)))
        x1 = Math.min(x1, parseFloat(annotObject.twoD.points[p].x))
        y1 = Math.min(y1, parseFloat(annotObject.twoD.points[p].y))
        x2 = Math.max(x2, parseFloat(annotObject.twoD.points[p].x))
        y2 = Math.max(y2, parseFloat(annotObject.twoD.points[p].y))

        // if (isLine) {
        let markPoint = new Paper.Path()
        markPoint.add(
          new Paper.Point(parseFloat(annotObject.twoD.points[p].x), parseFloat(annotObject.twoD.points[p].y))
        )
        markPoint.strokeColor = path.strokeColor
        markPoint.strokeWidth = path.strokeWidth
        // if (isLine) markPoint.strokeWidth = 2
        markPoint.strokeCap = 'round'
        markPoint.strokeScaling = false
        markPoint.closed = true
        markPoint.opacity = 1
        markPoint.markType = 'point'
        markPoint.pointIndex = 1000 + p
        markPoint.parentLabel = path
        path.points.push(markPoint)
        // }
      }
      path.tag = annotObject.getLabels(this.selectDictLabel, this.attributeNames)
      path.customCenter = {
        x: (x1 + x2) / 2,
        y: (y1 + y2) / 2,
      }

      // 标注属性描述文字
      let descriptionText = new Paper.PointText({
        position: new Paper.Point((x1 + x2) / 2, (y1 + y2) / 2),
        fillColor: elementColor,
        justification: 'left',
        fontSize: fontSize,
        locked: true,
      })
      descriptionText.strokeWidth = 2
      descriptionText.content = message
      descriptionText.opacity = this.attributesTextOpacity

      path.textObject = descriptionText

      path.mMarkAnnotationId = annotObject.mMarkAnnotationId

      path.pointToLocal = (point) => {
        return this.rasterLayer[imageIndex].globalToLocal(point)
      }

      path.hide = () => {
        path.textObject.opacity = 0
        path.opacity = 0
        if (path.fillPath) {
          path.fillPath.opacity = 0
        }
        if (path.points) {
          path.points.forEach((p) => {
            p.opacity = 0
          })
        }
      }
      path.show = () => {
        path.textObject.opacity = 1
        path.opacity = 1
        if (path.fillPath) {
          path.opacity = 0.01
          path.fillPath.opacity = 1
        }
        if (path.points) {
          path.points.forEach((p) => {
            p.opacity = 1
          })
        }
      }

      this.annotation2dMap[imageIndex].set(annotObject.twoD.other_attributes.a1, path)
      return path
    },
    drawRect(fontSize, imageIndex, annotObject) {
      /*
        0----6
        |    |\
        |    | \
        |    |  \
        |    |   7
        |    |   |
        |    |   |
        |    |   5
        |    | 3/
        |    |2/
        |    |/
        -----4    1
        */
      let x1 = Math.min(parseFloat(annotObject.twoD.bndbox.xmin), parseFloat(annotObject.twoD.bndbox.xmax))
      let y1 = Math.min(parseFloat(annotObject.twoD.bndbox.ymin), parseFloat(annotObject.twoD.bndbox.ymax))
      let x2 = Math.max(parseFloat(annotObject.twoD.bndbox.xmin), parseFloat(annotObject.twoD.bndbox.xmax))
      let y2 = Math.max(parseFloat(annotObject.twoD.bndbox.ymin), parseFloat(annotObject.twoD.bndbox.ymax))
      let elementColor = this.selectDictLabel(this.colorNames, annotObject.name)
      let message = annotObject.getLabelDescriptions(this.selectDictLabel, this.attributeNames)
      if (this.selectDictLabel(this.attributeNames, 'size_2d') == 'true') {
        message += '宽x高：' + Math.abs(x2 - x1) + 'x' + Math.abs(y2 - y1)
      }
      let fac = parseFloat(Math.min(Math.abs(x2 - x1), Math.abs(y2 - y1)) / 14)

      // 标注属性描述文字
      let descriptionText = new Paper.PointText({
        position: new Paper.Point(Math.min(x1, x2) + fac, Math.min(y1, y2)),
        fillColor: elementColor,
        justification: 'left',
        fontSize: fontSize,
        locked: true,
      })
      descriptionText.strokeWidth = 1
      descriptionText.content = message
      descriptionText.opacity = this.attributesTextOpacity

      // let remarkText = this.drawRemark((x1 + x2) / 2, (y1 + y2) / 2, annotObject.twoD.other_attributes.a1 + '-2d-' + imageIndex, fontSize);

      let path = new Paper.Path()
      path.add(new Paper.Point(x1, y1))
      path.add(new Paper.Point(x2, y1))
      path.add(new Paper.Point(x2, y2))
      path.add(new Paper.Point(x1, y2))
      path.strokeColor = elementColor
      path.strokeWidth = this.rectStrokeWidth
      path.strokeScaling = false
      path.closed = true
      path.opacity = 1
      let baseRect = path

      path = new Paper.Path()
      path.data.baseRect = baseRect
      path.add(new Paper.Point(x1, y1))
      path.add(new Paper.Point(x2, y1))
      path.add(new Paper.Point(x2, y2))
      path.add(new Paper.Point(x1, y2))
      path.closed = true
      path.fillColor = elementColor
      path.selectedColor = elementColor
      if (!path.fillColor) {
        path.fillColor = 'rgb(0,255,255)'
      }
      if (annotObject.twoD.bndbox.xsmin) {
        path.opacity = 0.1
        // path.fillColor = 'white';
        path.fillColor = elementColor
      } else path.opacity = 0
      path.tag = annotObject.getLabels(this.selectDictLabel, this.attributeNames)
      path.customCenter = {
        x: (x1 + x2) / 2,
        y: (y1 + y2) / 2,
      }

      path.textObject = descriptionText
      // if(this.markType !== 10)
      //   path.missObject = remarkText;

      // let opacity = this.selectedObject && this.selectedObject.a1 == attrs[1] ? 1 : 0;
      let point1 = new Paper.Path()
      point1.add(new Paper.Point(x1, y1))
      point1.strokeColor = elementColor
      point1.strokeWidth = this.pointStrokeWidth
      point1.strokeScaling = false
      point1.closed = true
      // point1.opacity = opacity;
      point1.markType = 'point'
      point1.strokeCap = 'round'
      point1.tag = path.tag
      point1.customCenter = {
        x: x1,
        y: y1,
      }
      point1.parentLabel = path
      point1.pointIndex = 0
      point1.parentLabel = path
      path.point1 = point1

      let point3 = new Paper.Path()
      point3.add(new Paper.Point(x2, y2))
      point3.strokeColor = elementColor
      point3.strokeWidth = this.pointStrokeWidth
      point3.strokeScaling = false
      point3.closed = true
      // point3.opacity = opacity;
      point3.markType = 'point'
      point3.strokeCap = 'round'
      point3.tag = path.tag
      point3.customCenter = {
        x: x2,
        y: y2,
      }
      point3.parentLabel = path
      point3.pointIndex = 1
      point3.parentLabel = path
      path.point3 = point3

      path.markType = 'rect'

      this.annotation2dMap[imageIndex].set(annotObject.twoD.other_attributes.a1, path)

      if (annotObject.twoD.bndbox.xlmin) {
        let xlmin = Math.min(parseFloat(annotObject.twoD.bndbox.xlmin), parseFloat(annotObject.twoD.bndbox.xlmax))
        let ylmin = Math.min(parseFloat(annotObject.twoD.bndbox.ylmin), parseFloat(annotObject.twoD.bndbox.ylmax))
        let xlmax = Math.max(parseFloat(annotObject.twoD.bndbox.xlmin), parseFloat(annotObject.twoD.bndbox.xlmax))
        let ylmax = Math.max(parseFloat(annotObject.twoD.bndbox.ylmin), parseFloat(annotObject.twoD.bndbox.ylmax))
        let rangePath = new Paper.Path()
        rangePath.add(new Paper.Point(xlmin, ylmin))
        rangePath.add(new Paper.Point(xlmax, ylmax))
        rangePath.strokeColor = elementColor
        rangePath.strokeWidth = 2
        rangePath.strokeScaling = false
        rangePath.closed = false
        rangePath.opacity = 1
        rangePath.markType = 'rect_line'
        rangePath.tag = path.tag
        rangePath.parentLabel = path
        rangePath.customCenter = {
          x: (xlmin + xlmax) / 2,
          y: (ylmin + ylmax) / 2,
        }

        let rangePoint1 = new Paper.Path()
        rangePoint1.add(new Paper.Point(xlmin, ylmin))
        rangePoint1.strokeColor = 'rgb(255,0,0)'
        rangePoint1.strokeWidth = this.pointStrokeWidth
        rangePoint1.strokeScaling = false
        rangePoint1.closed = true
        rangePoint1.opacity = 1
        rangePoint1.markType = 'point'
        rangePoint1.strokeCap = 'round'
        rangePoint1.tag = path.tag
        rangePoint1.customCenter = {
          x: xlmin,
          y: ylmin,
        }
        rangePoint1.pointIndex = 3
        rangePoint1.parentLabel = rangePath
        rangePath.rangePoint1 = rangePoint1

        let rangePoint2 = new Paper.Path()
        rangePoint2.add(new Paper.Point(xlmax, ylmax))
        rangePoint2.strokeColor = 'rgb(255,0,0)'
        rangePoint2.strokeWidth = this.pointStrokeWidth
        rangePoint2.strokeScaling = false
        rangePoint2.closed = true
        rangePoint2.opacity = 1
        rangePoint2.markType = 'point'
        rangePoint2.strokeCap = 'round'
        rangePoint2.tag = path.tag
        rangePoint2.customCenter = {
          x: xlmax,
          y: ylmax,
        }
        rangePoint2.pointIndex = 4
        rangePoint2.parentLabel = rangePath
        rangePath.rangePoint2 = rangePoint2

        path.rangePath = rangePath

        rangePath = new Paper.Path()
        if (xlmin >= x2) rangePath.add(new Paper.Point(x2, y1))
        else rangePath.add(new Paper.Point(x1, y1))
        rangePath.add(new Paper.Point(xlmin, ylmin))
        rangePath.strokeColor = elementColor
        rangePath.strokeWidth = 2
        rangePath.strokeScaling = false
        rangePath.closed = false
        rangePath.opacity = 1
        rangePath.markType = 'rect_line'
        rangePath.tag = path.tag
        rangePath.parentLabel = path
        rangePath.customCenter = {
          x: (xlmin + xlmax) / 2,
          y: (ylmin + ylmax) / 2,
        }

        rangePath = new Paper.Path()
        if (xlmin >= x2) rangePath.add(new Paper.Point(x2, y2))
        else rangePath.add(new Paper.Point(x1, y2))
        rangePath.add(new Paper.Point(xlmax, ylmax))
        rangePath.strokeColor = elementColor
        rangePath.strokeWidth = 2
        rangePath.strokeScaling = false
        rangePath.closed = false
        rangePath.opacity = 1
        rangePath.markType = 'rect_line'
        rangePath.tag = path.tag
        rangePath.parentLabel = path
        rangePath.customCenter = {
          x: (xlmin + xlmax) / 2,
          y: (ylmin + ylmax) / 2,
        }
      }

      if (annotObject.twoD.bndbox.xsmin) {
        let x3 = Math.min(parseFloat(annotObject.twoD.bndbox.xsmin), parseFloat(annotObject.twoD.bndbox.xsmax))
        let y3 = Math.min(parseFloat(annotObject.twoD.bndbox.ysmin), parseFloat(annotObject.twoD.bndbox.ysmax))
        let x4 = Math.max(parseFloat(annotObject.twoD.bndbox.xsmin), parseFloat(annotObject.twoD.bndbox.xsmax))
        let y4 = Math.max(parseFloat(annotObject.twoD.bndbox.ysmin), parseFloat(annotObject.twoD.bndbox.ysmax))
        let pathArray = []
        let tmpPath = new Paper.Path()
        if (y1 < y3) tmpPath.dashArray = [3, 5]
        tmpPath.add(new Paper.Point(x3, y3))
        tmpPath.add(new Paper.Point(x4, y3))
        tmpPath.add(new Paper.Point(x2, y1))
        tmpPath.strokeColor = elementColor
        tmpPath.strokeWidth = 1
        tmpPath.strokeScaling = false
        tmpPath.closed = false
        tmpPath.opacity = 1
        pathArray.push(tmpPath)

        tmpPath = new Paper.Path()
        if (x1 < x3 && y1 < y3) tmpPath.dashArray = [3, 5]
        tmpPath.add(new Paper.Point(x1, y1))
        tmpPath.add(new Paper.Point(x3, y3))
        tmpPath.strokeColor = elementColor
        tmpPath.strokeWidth = 1
        tmpPath.strokeScaling = false
        tmpPath.closed = false
        tmpPath.opacity = 1
        pathArray.push(tmpPath)

        tmpPath = new Paper.Path()
        if (x1 < x3) tmpPath.dashArray = [3, 5]
        tmpPath.add(new Paper.Point(x3, y3))
        tmpPath.add(new Paper.Point(x3, y4))
        tmpPath.add(new Paper.Point(x1, y2))
        tmpPath.strokeColor = elementColor
        tmpPath.strokeWidth = 1
        tmpPath.strokeScaling = false
        tmpPath.closed = false
        tmpPath.opacity = 1
        pathArray.push(tmpPath)

        tmpPath = new Paper.Path()
        tmpPath.dashArray = [3, 5]
        tmpPath.add(new Paper.Point(x3, y4))
        tmpPath.add(new Paper.Point(x4, y4))
        tmpPath.strokeColor = elementColor
        tmpPath.strokeWidth = 1
        tmpPath.strokeScaling = false
        tmpPath.closed = false
        tmpPath.opacity = 1
        pathArray.push(tmpPath)

        tmpPath = new Paper.Path()
        if (x4 < x2) tmpPath.dashArray = [3, 5]
        tmpPath.add(new Paper.Point(x4, y3))
        tmpPath.add(new Paper.Point(x4, y4))
        tmpPath.add(new Paper.Point(x2, y2))
        tmpPath.strokeColor = elementColor
        tmpPath.strokeWidth = 1
        tmpPath.strokeScaling = false
        tmpPath.closed = false
        tmpPath.opacity = 1
        pathArray.push(tmpPath)

        path.pathArray = pathArray
        if (this.markType == 10) {
          let xBoundMin = Math.min(x1, x3)
          let xBoundMax = Math.max(x2, x4)
          let yBoundMin = Math.min(y1, y3)
          let yBoundMax = Math.max(y2, y4)
          tmpPath = new Paper.Path()
          tmpPath.dashArray = [8, 3]
          tmpPath.add(new Paper.Point(xBoundMin, yBoundMin))
          tmpPath.add(new Paper.Point(xBoundMax, yBoundMin))
          tmpPath.add(new Paper.Point(xBoundMax, yBoundMax))
          tmpPath.add(new Paper.Point(xBoundMin, yBoundMax))
          tmpPath.strokeColor = 'blue'
          tmpPath.strokeWidth = 2
          tmpPath.strokeScaling = false
          tmpPath.closed = true
          tmpPath.opacity = this.attributesTextOpacity
          pathArray.push(tmpPath)
          path.rangeHelper = tmpPath
        }
      }

      path.mMarkAnnotationId = annotObject.mMarkAnnotationId
      path.pointToLocal = (point) => {
        return this.rasterLayer[imageIndex].globalToLocal(point)
      }
      path.hide = () => {
        path.textObject.opacity = 0
        path.data.baseRect.opacity = 0
        if (path.rangePath) {
          path.rangePath.opacity = 0
        }
        if (path.pathArray) {
          path.pathArray.forEach((p) => {
            p.opacity = 0
          })
        }
        if (path.opacity == 0.1) {
          path.opacity = 0.001
        }
        if (path.rangeHelper) {
          path.rangeHelper.opacity = 0
        }
      }
      path.show = () => {
        path.textObject.opacity = 1
        path.data.baseRect.opacity = 1
        if (path.rangePath) {
          path.rangePath.opacity = 1
        }
        if (path.pathArray) {
          path.pathArray.forEach((p) => {
            p.opacity = 1
          })
        }
        if (path.opacity == 0.001) {
          path.opacity = 0.1
        }
        if (path.rangeHelper) {
          path.rangeHelper.opacity = 1
        }
      }
      return path
    },
    drawRectPoint1(fontSize, imageIndex, annotObject) {
      let x1 = Math.min(parseFloat(annotObject.twoD.bndbox.xmin), parseFloat(annotObject.twoD.bndbox.xmax))
      let y1 = Math.min(parseFloat(annotObject.twoD.bndbox.ymin), parseFloat(annotObject.twoD.bndbox.ymax))
      let x2 = Math.max(parseFloat(annotObject.twoD.bndbox.xmin), parseFloat(annotObject.twoD.bndbox.xmax))
      let y2 = Math.max(parseFloat(annotObject.twoD.bndbox.ymin), parseFloat(annotObject.twoD.bndbox.ymax))
      let pointX = parseFloat(annotObject.twoD.bndbox.pointX)
      let pointY = parseFloat(annotObject.twoD.bndbox.pointY)
      let elementColor = this.selectDictLabel(this.colorNames, annotObject.name)
      let message = annotObject.getLabelDescriptions(this.selectDictLabel, this.attributeNames)
      if (this.selectDictLabel(this.attributeNames, 'size_2d') == 'true') {
        message += '宽x高：' + Math.abs(x2 - x1).toFixed(2) + 'x' + Math.abs(y2 - y1).toFixed(2)
      }
      let fac = parseFloat(Math.min(Math.abs(x2 - x1), Math.abs(y2 - y1)) / 14)

      // 标注属性描述文字
      let descriptionText = new Paper.PointText({
        position: new Paper.Point(Math.min(x1, x2) + fac, Math.min(y1, y2)),
        fillColor: elementColor,
        justification: 'left',
        fontSize: fontSize,
        locked: true,
      })
      descriptionText.strokeWidth = 1
      descriptionText.content = message
      descriptionText.opacity = this.attributesTextOpacity

      // let remarkText = this.drawRemark((x1 + x2) / 2, (y1 + y2) / 2, annotObject.twoD.other_attributes.a1 + '-2d-' + imageIndex, fontSize);

      let path = new Paper.Path()
      path.add(new Paper.Point(x1, y1))
      path.add(new Paper.Point(x2, y1))
      path.add(new Paper.Point(x2, y2))
      path.add(new Paper.Point(x1, y2))
      path.strokeColor = elementColor
      path.strokeWidth = this.rectStrokeWidth
      path.strokeScaling = false
      path.closed = true
      path.opacity = 1
      if (this.selectDictLabel(this.attributeNames, 'show_rect') == 'false') {
        path.opacity = 0
      }
      let baseRect = path

      path = new Paper.Path()
      path.data.baseRect = baseRect
      path.add(new Paper.Point(x1, y1))
      path.add(new Paper.Point(x2, y1))
      path.add(new Paper.Point(x2, y2))
      path.add(new Paper.Point(x1, y2))
      path.closed = true
      path.fillColor = elementColor
      path.selectedColor = elementColor
      if (!path.fillColor) {
        path.fillColor = 'rgb(0,255,255)'
      }
      if (annotObject.twoD.bndbox.xsmin) {
        path.opacity = 0.1
        path.fillColor = elementColor
      } else {
        path.opacity = 0
      }
      path.tag = annotObject.getLabels(this.selectDictLabel, this.attributeNames)
      path.customCenter = {
        x: (x1 + x2) / 2,
        y: (y1 + y2) / 2,
      }

      path.textObject = descriptionText
      // if(this.markType !== 10) {
      //   path.missObject = remarkText;
      // }
      let point1 = new Paper.Path()
      point1.add(new Paper.Point(x1, y1))
      point1.strokeColor = elementColor
      point1.strokeWidth = this.pointStrokeWidth
      point1.strokeScaling = false
      point1.closed = true
      point1.markType = 'point'
      point1.strokeCap = 'round'
      point1.tag = path.tag
      point1.customCenter = {
        x: x1,
        y: y1,
      }
      point1.parentLabel = path
      point1.pointIndex = 0
      point1.parentLabel = path
      if (this.selectDictLabel(this.attributeNames, 'show_rect') == 'false') {
        point1.opacity = 0
      }
      path.point1 = point1

      let point3 = new Paper.Path()
      point3.add(new Paper.Point(x2, y2))
      point3.strokeColor = elementColor
      point3.strokeWidth = this.pointStrokeWidth
      point3.strokeScaling = false
      point3.closed = true
      point3.markType = 'point'
      point3.strokeCap = 'round'
      point3.tag = path.tag
      point3.customCenter = {
        x: x2,
        y: y2,
      }
      point3.parentLabel = path
      point3.pointIndex = 1
      if (this.selectDictLabel(this.attributeNames, 'show_rect') == 'false') {
        point3.opacity = 0
      }
      path.point3 = point3

      let rectPoint1 = new Paper.Path()
      rectPoint1.add(new Paper.Point(pointX, pointY))
      rectPoint1.strokeColor = elementColor
      rectPoint1.strokeWidth = this.pointStrokeWidth
      rectPoint1.strokeScaling = false
      rectPoint1.closed = true
      rectPoint1.markType = 'rectPoint1'
      rectPoint1.strokeCap = 'round'
      rectPoint1.tag = path.tag
      rectPoint1.customCenter = {
        x: x2,
        y: y2,
      }
      rectPoint1.parentLabel = path
      path.rectPoint1 = rectPoint1

      path.markType = 'rect'

      this.annotation2dMap[imageIndex].set(annotObject.twoD.other_attributes.a1, path)

      path.mMarkAnnotationId = annotObject.mMarkAnnotationId
      path.pointToLocal = (point) => {
        return this.rasterLayer[imageIndex].globalToLocal(point)
      }
      path.hide = () => {
        path.textObject.opacity = 0
        path.data.baseRect.opacity = 0
        path.point1.opacity = 0
        path.point3.opacity = 0
        path.rectPoint1.opacity = 0
        if (path.opacity == 0.1) {
          path.opacity = 0.001
        }
      }
      path.show = () => {
        path.textObject.opacity = 1
        path.data.baseRect.opacity = 1
        path.point1.opacity = 1
        path.point3.opacity = 1
        path.rectPoint1.opacity = 1
        if (path.opacity == 0.001) {
          path.opacity = 0.1
        }
      }
      return path
    },
    drawGrid(fontSize, imageIndex, annotObject) {
      let x1 = parseFloat(annotObject.twoD.points[0].x)
      let y1 = parseFloat(annotObject.twoD.points[0].y)
      let x2 = parseFloat(annotObject.twoD.points[1].x)
      let y2 = parseFloat(annotObject.twoD.points[1].y)
      let elementColor = this.selectDictLabel(this.colorNames, annotObject.name)
      let message = annotObject.getLabelDescriptions(this.selectDictLabel, this.attributeNames)
      if (this.selectDictLabel(this.attributeNames, 'size_2d') == 'true') {
        message += '宽x高：' + Math.abs(x2 - x1) + 'x' + Math.abs(y2 - y1)
      }
      let fac = parseFloat(Math.min(Math.abs(x2 - x1), Math.abs(y2 - y1)) / 14)

      // 标注属性描述文字
      let descriptionText = new Paper.PointText({
        position: new Paper.Point(Math.min(x1, x2) + fac, Math.min(y1, y2)),
        fillColor: elementColor,
        justification: 'left',
        fontSize: fontSize,
        locked: true,
      })
      descriptionText.strokeWidth = 1
      descriptionText.content = message
      descriptionText.opacity = this.attributesTextOpacity

      // let remarkText = this.drawRemark((x1 + x2) / 2, (y1 + y2) / 2, annotObject.twoD.other_attributes.a1 + '-2d-' + imageIndex, fontSize);

      let path = new Paper.Path()
      path.add(new Paper.Point(x1, y1))
      path.add(new Paper.Point(x2, y1))
      path.add(new Paper.Point(x2, y2))
      path.add(new Paper.Point(x1, y2))
      path.strokeColor = elementColor
      path.strokeWidth = 1
      path.strokeScaling = false
      path.closed = true
      path.opacity = 1
      let baseRect = path

      path = new Paper.Path()
      path.data.baseRect = baseRect
      path.add(new Paper.Point(x1, y1))
      path.add(new Paper.Point(x2, y1))
      path.add(new Paper.Point(x2, y2))
      path.add(new Paper.Point(x1, y2))
      path.closed = true
      path.fillColor = elementColor
      path.selectedColor = elementColor
      if (!path.fillColor) {
        path.fillColor = 'rgb(0,255,255)'
      }
      path.tag = annotObject.getLabels(this.selectDictLabel, this.attributeNames)
      path.customCenter = {
        x: (x1 + x2) / 2,
        y: (y1 + y2) / 2,
      }
      path.opacity = 0.001

      path.textObject = descriptionText
      // if(this.markType !== 10)
      //   path.missObject = remarkText;

      let point1 = new Paper.Path()
      point1.add(new Paper.Point(x1, y1))
      point1.strokeColor = elementColor
      point1.strokeWidth = this.pointStrokeWidth
      point1.strokeScaling = false
      point1.closed = true
      point1.markType = 'point'
      point1.strokeCap = 'round'
      point1.tag = path.tag
      point1.customCenter = {
        x: x1,
        y: y1,
      }
      point1.parentLabel = path
      point1.pointIndex = 0
      point1.parentLabel = path
      path.point1 = point1

      let point3 = new Paper.Path()
      point3.add(new Paper.Point(x2, y2))
      point3.strokeColor = elementColor
      point3.strokeWidth = this.pointStrokeWidth
      point3.strokeScaling = false
      point3.closed = true
      point3.markType = 'point'
      point3.strokeCap = 'round'
      point3.tag = path.tag
      point3.customCenter = {
        x: x2,
        y: y2,
      }
      point3.parentLabel = path
      point3.pointIndex = 1
      point3.parentLabel = path
      path.point3 = point3

      path.markType = 'grid'

      this.annotation2dMap[imageIndex].set(annotObject.twoD.other_attributes.a1, path)

      for (let p = 2; p < annotObject.twoD.points.length; p++) {
        let line = new Paper.Path()
        line.add(new Paper.Point(parseFloat(annotObject.twoD.points[p].x), parseFloat(annotObject.twoD.points[p].y)))
        p++
        line.add(new Paper.Point(parseFloat(annotObject.twoD.points[p].x), parseFloat(annotObject.twoD.points[p].y)))
        line.strokeColor = elementColor
        line.strokeWidth = 1
        line.strokeScaling = false
        line.closed = false
        line.opacity = 1
        line.markType = 'gridLine'
      }

      path.textObject = descriptionText

      path.pointToLocal = (point) => {
        return this.rasterLayer[imageIndex].globalToLocal(point)
      }

      path.hide = () => {
        path.textObject.opacity = 0
        path.opacity = 0
        if (path.points)
          path.points.forEach((p) => {
            p.opacity = 0
          })
      }
      path.show = () => {
        path.textObject.opacity = 1
        path.opacity = 1
        if (path.points)
          path.points.forEach((p) => {
            p.opacity = 1
          })
      }

      path.mMarkAnnotationId = annotObject.mMarkAnnotationId
      this.annotation2dMap[imageIndex].set(annotObject.twoD.other_attributes.a1, path)
      return path
    },
    drawRect3d(fontSize, imageIndex, annotObject) {
      let x1 = parseFloat(annotObject.twoD.bndbox.xmin)
      let y1 = parseFloat(annotObject.twoD.bndbox.ymin)
      let x2 = parseFloat(annotObject.twoD.bndbox.xmax)
      let y2 = parseFloat(annotObject.twoD.bndbox.ymax)
      let elementColor = this.selectDictLabel(this.colorNames, annotObject.name)
      let message = ''
      let pointText = ''
      let pointTag = annotObject.name + ':2;'
      let attrs = [
        annotObject.name,
        annotObject.twoD.other_attributes.a1,
        annotObject.twoD.other_attributes.a2,
        annotObject.twoD.other_attributes.a3,
        annotObject.twoD.other_attributes.a4,
        annotObject.twoD.other_attributes.a5,
        annotObject.twoD.other_attributes.a6,
        annotObject.twoD.other_attributes.a7,
        annotObject.twoD.other_attributes.a8,
        annotObject.twoD.other_attributes.b1,
        annotObject.twoD.other_attributes.b2,
        annotObject.twoD.other_attributes.b3,
        annotObject.twoD.other_attributes.b4,
        annotObject.twoD.other_attributes.b5,
        annotObject.twoD.other_attributes.b6,
        annotObject.twoD.other_attributes.b7,
        annotObject.twoD.other_attributes.b8,
      ]
      let jsonObject
      let _values = undefined
      try {
        jsonObject = JSON.parse(this.selectDictLabel(this.attributeNames, 'labelName'))
        _values = jsonObject.values[annotObject.name]
      } catch (e) {}
      message += _values === undefined ? annotObject.name : _values
      if (annotObject.twoD.other_attributes.a1) message += '-' + annotObject.twoD.other_attributes.a1
      for (let i = 1; i <= 9; i++) {
        if (attrs[i] && attrs[i] != null && attrs[i] != '' && attrs[i] != 'null') {
          try {
            let jsonObject = JSON.parse(this.selectDictLabel(this.attributeNames, 'a' + i + '_2d'))
            let _values = jsonObject.values[attrs[i]]
            if (_values === undefined) continue
            if (!jsonObject.pointAttribute || jsonObject.pointAttribute == 'false') {
              message += '-' + _values
              pointTag += ';'
            } else {
              pointText += '-' + _values
              pointTag += attrs[i] + ';'
            }
          } catch (e) {
            if (!jsonObject.pointAttribute || jsonObject.pointAttribute == 'false') message += '-' + attrs[i]
            else pointText += '-' + attrs[i]
          }
        }
      }
      if (this.selectDictLabel(this.attributeNames, 'size_2d') == 'true') {
        message += '宽x高：' + parseInt(Math.abs(x2 - x1)) + 'x' + parseInt(Math.abs(y2 - y1))
      }
      let fac = parseFloat(Math.min(Math.abs(x2 - x1), Math.abs(y2 - y1)) / 14)

      // 标注属性描述文字
      let descriptionText = new Paper.PointText({
        position: new Paper.Point(Math.min(x1, x2) + fac, Math.min(y1, y2)),
        fillColor: elementColor,
        justification: 'left',
        fontSize: fontSize,
        locked: true,
      })
      descriptionText.strokeWidth = 1
      descriptionText.content = message
      descriptionText.opacity = this.attributesTextOpacity

      // let remarkText = this.drawRemark((x1 + x2) / 2, (y1 + y2) / 2, annotObject.twoD.other_attributes.a1 + '-2d-' + imageIndex, fontSize);

      let path = new Paper.Path()
      path.add(new Paper.Point(x1, y1))
      path.add(new Paper.Point(x2, y1))
      path.add(new Paper.Point(x2, y2))
      path.add(new Paper.Point(x1, y2))
      path.strokeColor = elementColor
      path.strokeWidth = this.rectStrokeWidth
      path.strokeScaling = false
      path.closed = true
      path.opacity = 1
      let baseRect = path

      path = new Paper.Path()
      path.data.baseRect = baseRect
      path.add(new Paper.Point(x1, y1))
      path.add(new Paper.Point(x2, y1))
      path.add(new Paper.Point(x2, y2))
      path.add(new Paper.Point(x1, y2))
      path.closed = true
      path.fillColor = elementColor
      path.selectedColor = elementColor
      if (!path.fillColor) {
        path.fillColor = 'rgb(0,255,255)'
      }
      path.opacity = 0
      path.tag =
        annotObject.name +
        ':2;' +
        annotObject.twoD.other_attributes.a1 +
        ';' +
        annotObject.twoD.other_attributes.a2 +
        ';' +
        annotObject.twoD.other_attributes.a3 +
        ';' +
        annotObject.twoD.other_attributes.a4 +
        ';' +
        annotObject.twoD.other_attributes.a5 +
        ';' +
        annotObject.twoD.other_attributes.a6 +
        ';' +
        annotObject.twoD.other_attributes.a7 +
        ';' +
        annotObject.twoD.other_attributes.a8 +
        ';'
      path.customCenter = {
        x: (x1 + x2) / 2,
        y: (y1 + y2) / 2,
      }

      path.textObject = descriptionText
      // if(this.markType !== 10)
      //   path.missObject = remarkText;

      // let opacity = this.selectedObject && this.selectedObject.a1 == attrs[1] ? 1 : 0;
      let point1 = new Paper.Path()
      point1.add(new Paper.Point(x1, y1))
      point1.strokeColor = path.fillColor
      point1.strokeWidth = this.pointStrokeWidth
      point1.strokeScaling = false
      point1.closed = true
      // point1.opacity = opacity;
      point1.markType = 'point'
      point1.strokeCap = 'round'
      point1.tag = path.tag
      point1.customCenter = {
        x: x1,
        y: y1,
      }
      point1.parentLabel = path
      point1.pointIndex = 0
      point1.parentLabel = path
      path.point1 = point1

      let point3 = new Paper.Path()
      point3.add(new Paper.Point(x2, y2))
      point3.strokeColor = path.fillColor
      point3.strokeWidth = this.pointStrokeWidth
      point3.strokeScaling = false
      point3.closed = true
      // point3.opacity = opacity;
      point3.markType = 'point'
      point3.strokeCap = 'round'
      point3.tag = path.tag
      point3.customCenter = {
        x: x2,
        y: y2,
      }
      point3.parentLabel = path
      point3.pointIndex = 1
      point3.parentLabel = path
      path.point3 = point3

      path.markType = 'rect'

      this.annotation2dMap[imageIndex].set(annotObject.twoD.other_attributes.a1, path)
      let gPoint = this.selectDictLabel(this.attributeNames, 'g_point')
      if (annotObject.twoD.bndbox.xmid) {
        let xmid = parseFloat(annotObject.twoD.bndbox.xmid)
        let ymid = parseFloat(annotObject.twoD.bndbox.ymid)
        let midPath = new Paper.Path()
        if (gPoint && gPoint === 'true') {
          midPath.add(new Paper.Point(xmid, ymid))
          midPath.add(new Paper.Point(xmid, ymid))
        } else {
          midPath.add(new Paper.Point(xmid, y1))
          midPath.add(new Paper.Point(xmid, y2))
        }
        // midPath.strokeColor = elementColor;
        midPath.strokeColor = 'rgb(0,255,0)'
        midPath.strokeWidth = 2
        midPath.strokeScaling = false
        midPath.closed = false
        midPath.opacity = 1
        midPath.markType = 'rect_mid'
        midPath.tag = path.tag
        midPath.parentLabel = path
        midPath.customCenter = {
          x: xmid,
          y: ymid,
        }

        let pointMid = new Paper.Path()
        if (gPoint && gPoint === 'true') {
          pointMid.add(new Paper.Point(xmid, ymid))
          pointMid.tag = pointTag
        } else {
          pointMid.add(new Paper.Point(xmid, (y1 + y2) / 2))
          pointMid.tag = path.tag
        }

        pointMid.strokeColor = 'rgb(0,255,0)'
        pointMid.strokeWidth = this.pointStrokeWidth
        pointMid.strokeScaling = false
        pointMid.closed = true
        pointMid.opacity = 1
        pointMid.markType = 'point'
        pointMid.strokeCap = 'round'
        pointMid.customCenter = {
          x: xmid,
          y: ymid,
        }
        pointMid.pointIndex = 2
        // 标注属性描述文字
        let pText = new Paper.PointText({
          position: new Paper.Point(xmid, ymid),
          fillColor: elementColor,
          justification: 'left',
          fontSize: fontSize,
          locked: true,
        })
        pText.strokeWidth = 1
        pText.content = pointText
        pText.opacity = this.attributesTextOpacity
        pointMid.textObject = pText
        pointMid.midPath = midPath
        midPath.pointMid = pointMid
        path.midPath = midPath
      }
      if (annotObject.twoD.bndbox.xlmin) {
        let xlmin = parseFloat(annotObject.twoD.bndbox.xlmin)
        let ylmin = parseFloat(annotObject.twoD.bndbox.ylmin)
        let xlmax = parseFloat(annotObject.twoD.bndbox.xlmax)
        let ylmax = parseFloat(annotObject.twoD.bndbox.ylmax)
        let rangePath = new Paper.Path()
        rangePath.add(new Paper.Point(xlmin, ylmin))
        rangePath.add(new Paper.Point(xlmax, ylmax))
        // rangePath.strokeColor = elementColor;
        rangePath.strokeColor = 'rgb(255,0,0)'
        rangePath.strokeWidth = 2
        rangePath.strokeScaling = false
        rangePath.closed = false
        rangePath.opacity = 1
        rangePath.markType = 'rect_line'
        rangePath.tag = path.tag
        rangePath.parentLabel = path
        rangePath.customCenter = {
          x: (xlmin + xlmax) / 2,
          y: (ylmin + ylmax) / 2,
        }

        let rangePoint1 = new Paper.Path()
        rangePoint1.add(new Paper.Point(xlmin, ylmin))
        rangePoint1.strokeColor = 'rgb(255,0,0)'
        rangePoint1.strokeWidth = this.pointStrokeWidth
        rangePoint1.strokeScaling = false
        rangePoint1.closed = true
        rangePoint1.opacity = 1
        rangePoint1.markType = 'point'
        rangePoint1.strokeCap = 'round'
        rangePoint1.tag = path.tag
        rangePoint1.customCenter = {
          x: xlmin,
          y: ylmin,
        }
        rangePoint1.pointIndex = 3
        rangePoint1.parentLabel = rangePath
        rangePath.rangePoint1 = rangePoint1

        let rangePoint2 = new Paper.Path()
        rangePoint2.add(new Paper.Point(xlmax, ylmax))
        rangePoint2.strokeColor = 'rgb(255,0,0)'
        rangePoint2.strokeWidth = this.pointStrokeWidth
        rangePoint2.strokeScaling = false
        rangePoint2.closed = true
        rangePoint2.opacity = 1
        rangePoint2.markType = 'point'
        rangePoint2.strokeCap = 'round'
        rangePoint2.tag = path.tag
        rangePoint2.customCenter = {
          x: xlmax,
          y: ylmax,
        }
        rangePoint2.pointIndex = 4
        rangePoint2.parentLabel = rangePath
        rangePath.rangePoint2 = rangePoint2

        path.rangePath = rangePath
      }

      path.mMarkAnnotationId = annotObject.mMarkAnnotationId
      path.pointToLocal = (point) => {
        return this.rasterLayer[imageIndex].globalToLocal(point)
      }
      path.hide = () => {
        // path.point1.opacity = 0;
        // path.point3.opacity = 0;
        path.textObject.opacity = 0
        path.data.baseRect.opacity = 0
        if (path.midPath) {
          path.midPath.opacity = 0
        }
        if (path.rangePath) {
          path.rangePath.opacity = 0
        }
      }
      path.show = () => {
        // path.point1 = 1;
        // path.point3 = 1;
        path.textObject.opacity = 1
        path.data.baseRect.opacity = 1
        if (path.midPath) {
          path.midPath.opacity = 1
        }
        if (path.rangePath) {
          path.rangePath.opacity = 1
        }
      }
      return path
    },
    resetSelectedObject(_index) {
      this.selectedObject = {
        name: '',
        a1: '',
        a2: '',
        a3: '',
        a4: '',
        a5: '',
        a6: '',
        a7: '',
        a8: '',
        remark: '',
        attributes: [],
        type: '2d',
        imageIndex: _index,
        errorType: '',
        mPoint: {
          x: -1,
          y: -1,
          z: -1,
        },
        elementInstance: null,
      }
    },
    onWindowResize() {
      this.loadDrawing(this.currentIndex, this.mQaResultId)
    },
    // 循环调用重置图片组件显示状态
    resizeCanvas(_index) {
      if (this.imgCount == 0) return
      let _count = this.imgCount + 1
      if (_index <= -1) {
        for (let imageIndex = 1; imageIndex < _count; imageIndex++) {
          this.resizeCanvasWithIndex(imageIndex)
        }
      } else {
        this.resizeCanvasWithIndex(_index)
      }
    },
    // 重置图片组件显示状态
    resizeCanvasWithIndex(imageIndex) {
      let canvasContainer = document.getElementById(this.id + 'canvasContainer' + imageIndex)

      if (!canvasContainer || this.raster.length == 0) return
      canvasContainer.width = this.imageWidth
      canvasContainer.height = this.imageHeight
      this.viewWidth = canvasContainer.offsetWidth
      this.viewHeight = canvasContainer.offsetHeight
      this.projects[imageIndex].view.viewSize = new Paper.Size(this.viewWidth, this.viewHeight)
      this.editorZoom()
      var viewRatio = this.viewWidth / this.viewHeight
      var bitmapRatio = this.imageWidth / this.imageHeight
      var gutterRatio = 1
      if (viewRatio < bitmapRatio) {
        this.scaleFactor = (gutterRatio * canvasContainer.offsetWidth) / this.imageWidth
      } else {
        this.scaleFactor = (gutterRatio * canvasContainer.offsetHeight) / this.imageHeight
      }

      let offsetX = (this.viewWidth - this.scaleFactor * this.imageWidth) / 2
      let offsetY = (this.viewHeight - this.scaleFactor * this.imageHeight) / 2
      var fullScreenMatrix = new Paper.Matrix().translate(offsetX, offsetY).scale(this.scaleFactor)
      this.rasterLayer[imageIndex].matrix = fullScreenMatrix
      this.mainLayer[imageIndex].matrix = fullScreenMatrix
      this.projects[imageIndex].view.initCenter = this.projects[imageIndex].view.center

      if (this.paperToolPosition[imageIndex] && this.paperToolPosition[imageIndex].zoom) {
        this.projects[imageIndex].view.zoom = this.paperToolPosition[imageIndex].zoom
        this.projects[imageIndex].view.center = this.paperToolPosition[imageIndex].center
      }
      if (
        this.paperToolPosition[imageIndex] &&
        this.paperToolPosition[imageIndex].rasterLayerPositionX &&
        this.paperToolPosition[imageIndex].rasterLayerPositionX !== 0
      ) {
        this.rasterLayer[imageIndex].position.x += this.paperToolPosition[imageIndex].rasterLayerPositionX
        this.rasterLayer[imageIndex].position.y += this.paperToolPosition[imageIndex].rasterLayerPositionY
        this.mainLayer[imageIndex].position.x += this.paperToolPosition[imageIndex].mainLayerPositionX
        this.mainLayer[imageIndex].position.y += this.paperToolPosition[imageIndex].mainLayerPositionY
      }
    },
    // 更新图片组件的监听事件
    editorZoom() {
      for (let imageIndex = 0; imageIndex < this.projects.length; imageIndex++) {
        let _project = this.projects[imageIndex]
        if (_project && _project.view) {
          if (this.viewZoom) {
            $(_project.view.element).off('wheel')
            // $(_project.view.element).off("mouseleave");
            $(_project.view.element).off('mouseenter')
          }
          $(_project.view.element).on('wheel', (event) => {
            event = event.originalEvent
            event.preventDefault()
            const mousePosition = new Paper.Point(event.offsetX, event.offsetY)
            try {
              this.zoom(event.deltaY, mousePosition, imageIndex)
            } catch (e) {
              console.debug('editorZoom', e)
            }
          })
          $(_project.view.element).on('mouseenter', (event) => {
            _project.activate()
            this.canvasIndex = imageIndex
            for (let j = 0; j < this.projects.length; j++) {
              let tmp = this.projects[j]
              if (tmp) {
                if (j == imageIndex) {
                  this.rasterLayer[j].selected = true
                } else {
                  this.rasterLayer[j].selected = false
                }
              }
            }
          })
        }
      }
      this.viewZoom = 'test'
    },
    // 缩放图片组件
    zoom(delta, mousePos, imageIndex) {
      const view = this.projects[imageIndex].view
      const oldZoom = view.zoom
      const oldCenter = view.center

      const viewPos = view.viewToProject(mousePos)
      let newZoom = delta < 0 ? view.zoom * this.factor : view.zoom / this.factor
      if (newZoom <= 0.6) {
        newZoom = 0.6
        view.center = { x: this.viewWidth / 2, y: this.viewHeight / 2 }
      }

      let zoomStricked = this.selectDictLabel(this.attributeNames, 'zoomStricked')

      // if (this.markType === 10 && newZoom > 13 && (!zoomStricked || zoomStricked == 'true')) return
      newZoom = Math.min(newZoom, this.maxZoom)
      let fontSize = this.pointTextFontSize
      if (newZoom != view.zoom) {
        for (let i = 0; i < this.projects[imageIndex].activeLayer.children.length; i++) {
          let _path = this.projects[imageIndex].activeLayer.children[i]
          if (_path.markRemarkId && _path.markType !== 'point') {
            if (newZoom > view.zoom) {
              _path.bounds.height *= 0.8
              _path.bounds.width *= 0.8
              if (_path.textObject) _path.textObject.fontSize *= 0.8
            } else {
              _path.bounds.height /= 0.8
              _path.bounds.width /= 0.8
              if (_path.textObject) _path.textObject.fontSize /= 0.8
            }
            continue
          }
          if (!_path.tag) continue
          if (newZoom > view.zoom) {
            if (_path.textObject) _path.textObject.fontSize *= 0.8
          } else {
            if (_path.textObject) _path.textObject.fontSize /= 0.8
          }
          if (_path.textObject) fontSize = _path.textObject.fontSize
        }
        view.zoom = newZoom
        const zoomScale = oldZoom / newZoom
        const centerAdjust = viewPos.subtract(oldCenter)
        const offset = viewPos.subtract(centerAdjust.multiply(zoomScale)).subtract(oldCenter)
        view.center = view.center.add(offset)
      } else {
        fontSize = this.paperToolPosition[imageIndex].fontSize
      }
      this.paperToolPosition[imageIndex].zoom = view.zoom
      this.paperToolPosition[imageIndex].center = view.center
      this.paperToolPosition[imageIndex].fontSize = fontSize
    },
    // 图片组件销毁
    imageDispose() {
      let _count = this.imgCount + 1
      for (let imageIndex = 1; imageIndex < _count; imageIndex++) {
        let image = document.getElementById(this.id + 'sourceImage' + imageIndex)

        if (this.projects[imageIndex]) {
          this.projects[imageIndex].clear()
          if (this.projects[imageIndex].view) this.projects[imageIndex].view.remove()
          this.projects[imageIndex].remove()
        }
        if (image) image.onload = null
      }
      this.raster.splice(0, this.raster.length)
      this.rasterLayer.splice(0, this.rasterLayer.length)
      this.mainLayer.splice(0, this.mainLayer.length)
      this.projects.splice(0, this.projects.length)
    },
    showAttributesText2D(show) {
      let opacity = show ? 1 : 0
      for (let m = 0; m < this.mainLayer.length; m++) {
        if (!this.mainLayer[m]) continue
        let items = this.mainLayer[m].getItems()
        for (let i = 0; i < items.length; i++) {
          if (items[i].textObject) {
            items[i].textObject.opacity = opacity
          }
          if (items[i].rangeHelper) {
            items[i].rangeHelper.opacity = opacity
          }
        }
      }
    },
    markSubmit() {
      const annotations = []
      this.mainLayer.forEach((layer) => {
        layer.children.forEach((child) => {
          if (child.action === 'addNew') {
            if (child.toDBObject) {
              annotations.push(child.toDBObject())
            }
          }
        })
      })
      this.submitAnnotations(annotations)
    },
    getGlobalAttributes() {
      let globalPoint = Paper.project.activeLayer.globalPoint
      if (!globalPoint) {
        globalPoint = {
          markType: 'onepoint',
          fileName: Paper.project.fileName,
          mQaResultId: Paper.project.mQaResultId,
          mMarkAnnotationId: undefined,
          name: 'pic_attr',
          type: '2d',
          a1: null,
          a2: null,
          a3: null,
          a4: null,
          a5: null,
          a6: null,
          a7: null,
          a8: null,
        }
      }
      globalPoint.toDBObject = function () {
        return {
          mMarkAnnotationId: null,
          mQaResultId: this.mQaResultId,
          name: this.labelName,
          x: 0,
          y: 0,
          z: 'onepoint',
          a1: this.a1,
          a2: this.a2,
          a3: this.a3,
          a4: this.a4,
          a5: this.a5,
          a6: this.a6,
          a7: this.a7,
          a8: this.a8,
          b1: this.b1,
          b2: this.b2,
          b3: this.b3,
          b4: this.b4,
          b5: this.b5,
          b6: this.b6,
          b7: this.b7,
          b8: this.b8,
          labels: undefined,
          fileType: '2d',
          fileName: this.fileName,
        }
      }
      globalPoint.callback = (params) => {
        if (params.ret === 'confirm') {
          this.changeList.add(globalPoint.mQaResultId, {
            action: 'addNew',
            info: globalPoint,
          })
        }
      }
      return globalPoint
    },
  },
  created() {
    this.selectedObjectA1 = this.$route.query.selectedObjectA1
    //在页面刷新时将paperToolPosition的信息保存到store里，再由全局main.js保存到localStorage里
    window.addEventListener('beforeunload', () => {
      localStorage.setItem('paperToolPosition', JSON.stringify(this.paperToolPosition))
      localStorage.setItem('currentIndex', this.currentIndex)
    })
  },
  mounted() {
    this.initPaperTool()
    window.addEventListener('resize', this.onWindowResize, false)
  },
  beforeDestroy() {
    this.paperTool.onMouseDown = null
    this.paperTool.onMouseUp = null
    this.paperTool.onMouseDrag = null
    this.paperTool.onMouseMove = null
    this.imageDispose()
    window.removeEventListener('resize', this.onWindowResize, false)
  },
}
</script>
<style lang="scss" scoped>
/* Scale canvas with resize attribute to full size */
canvas[resize] {
  width: 100%;
  height: 100%;
}
.img-canvas-list {
  max-height: 83vh;
  background: #fff;
  border-bottom: 1px solid #e6ebf5;
  canvas {
    height: auto;
  }
}
</style>
